/* =====================================================================
   PJM — ธีมหลัก (อ้างอิงจาก wireframe ที่อนุมัติแล้ว)
   ===================================================================== */

:root{
  --ink:#1C2430;
  --ink-soft:#5B6472;
  --line:#E4E7EC;
  --surface:#FFFFFF;
  --canvas:#F4F6F8;
  --sidebar:#161D27;
  --sidebar-soft:#8993A4;
  --accent:#0E7C7B;
  --accent-dark:#0A5A59;
  --accent-soft:#DCEFEE;
  --done:#3FA796;
  --progress:#2E7DD1;
  --overdue:#D6534A;
  --stale:#E8833A;
  --planned:#C7CDD6;
  --planned-fill:#EEF0F3;
  --amber:#E3A008;
  --radius:8px;
}

*{ box-sizing:border-box; }

/* กฎของเบราว์เซอร์สำหรับ [hidden] คือ display:none แต่มีความสำคัญต่ำมาก
   ถ้าเราตั้ง display:grid/flex ให้ element ไหน กฎเราจะทับ -> ซ่อนไม่ลง
   (เคยเกิดจริง: ยุบกิ่งงานแล้วแถวยังกินพื้นที่ ทำให้บรรทัดเหลื่อมกับ Gantt) */
[hidden]{ display:none !important; }

body{
  margin:0;
  font-family:'Noto Sans Thai','Prompt',sans-serif;
  background:var(--canvas);
  color:var(--ink);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- หน้าจอ auth (login / สมัคร) ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(135deg,#F4F6F8 0%,#E8EDF0 100%);
}
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px;
  box-shadow:0 4px 24px rgba(28,36,48,.08);
}
.auth-card.wide{ max-width:520px; }

.auth-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.brand-mark{
  width:36px; height:36px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Prompt'; font-weight:700; font-size:15px;
}
.brand-name{ font-family:'Prompt'; font-weight:600; font-size:17px; }
.brand-sub{ font-size:12px; color:var(--ink-soft); }

.auth-title{
  font-family:'Prompt'; font-weight:600; font-size:19px;
  margin:0 0 4px;
}
.auth-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 22px; }

/* ---------- ฟอร์ม ---------- */
.form-group{ margin-bottom:16px; }
.form-group label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--ink);
}
.form-group label .req{ color:var(--overdue); }

.form-control{
  width:100%;
  padding:10px 12px;
  font-family:inherit;
  font-size:14px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.form-control::placeholder{ color:#A8B0BB; }
select.form-control{ cursor:pointer; }

.cron-url{ display:flex; gap:8px; align-items:center; }
.cron-url .form-control{ font-size:12.5px; padding:8px 11px; background:#FAFBFC; }
.cron-url .btn{ flex-shrink:0; }
code.text-mono{
  display:inline-block;
  background:#F1F2F4;
  padding:2px 7px;
  border-radius:4px;
  font-size:11.5px;
  margin-top:3px;
}

.form-hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
.form-hint small{ font-size:12px; line-height:1.65; display:block; }
.form-hint b{ color:var(--ink); font-weight:500; }
/* คำอธิบายที่เปลี่ยนตามตัวเลือกที่ผู้ใช้เพิ่งเลือก — ใช้สีน้ำเงินให้ต่างจาก hint ทั่วไปที่เป็นเทา */
.form-hint-info{ color:var(--progress); }
.form-hint-info b{ color:var(--progress); font-weight:600; }
/* เตือนแต่ไม่ห้ามบันทึก — ใช้เหลืองอำพัน ไม่ใช่แดงซึ่งสงวนไว้ให้ error ที่บันทึกไม่ผ่าน */
.form-hint-warn{ color:#8A6212; background:#FDF4E3; border:1px solid #F5DFB0; border-radius:var(--radius); padding:8px 11px; }
.form-hint-warn b{ color:#8A6212; font-weight:600; }
.form-error{ font-size:12px; color:var(--overdue); margin-top:5px; }
.form-row{ display:flex; gap:12px; }
.form-row > *{ flex:1; }

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 16px;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.btn:hover{ background:#F7F8FA; text-decoration:none; }
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-danger{ background:var(--overdue); border-color:var(--overdue); color:#fff; }
.btn-danger:hover{ background:#BC463E; border-color:#BC463E; }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 11px; font-size:13px; }

/* ---------- ข้อความแจ้งเตือน ---------- */
.alert{
  padding:11px 14px;
  border-radius:var(--radius);
  font-size:13px;
  margin-bottom:18px;
  border:1px solid transparent;
}
.alert-success{ background:#E9F6F3; border-color:#B9E2D9; color:#1F6B5C; }
.alert-error  { background:#FBEDEC; border-color:#F0C9C6; color:#9E3B34; }
.alert-info   { background:#EAF2FB; border-color:#C6DCF3; color:#26608F; }
.alert-warning{ background:#FDF4E3; border-color:#F5DFB0; color:#8A6212; }

.auth-foot{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
}

/* =====================================================================
   เลย์เอาต์หลังบ้าน (sidebar + เนื้อหา)
   ===================================================================== */
/* ห้ามใส่ transition บน grid-template-columns — เบราว์เซอร์จะค้างค่ากลางทาง
   ทำให้คลาส .sidebar-collapsed ไม่มีผลเลย (ทดสอบแล้วเจอจริง)
   ถ้าอยากได้อนิเมชัน ให้ทำที่ความกว้างของ .sidebar แทน */
.app{
  display:grid;
  grid-template-columns:252px 1fr;
  min-height:100vh;
}
.app.sidebar-collapsed{ grid-template-columns:60px 1fr; }

/* เมนูซ้ายต้องค้างอยู่กับที่เสมอ ไม่เลื่อนหายตามเนื้อหาที่ยาว (หน้าคู่มือยาวหมื่นพิกเซล)
   ⚠️ 3 บรรทัดนี้ต้องมาด้วยกันทั้งชุด ขาดตัวใดตัวหนึ่งแล้ว **ไม่มีผลเลยและไม่มี error**:
     · align-self:start — ถ้าไม่ใส่ grid จะยืดช่องนี้เต็มความสูงแถว แล้ว sticky ไม่เหลือระยะให้เลื่อน
     · height:100vh    — ต้องกำหนดความสูงตายตัว ไม่งั้นยืดตามเนื้อหาเหมือนเดิม
     · top:0           — จุดที่ให้หยุดค้างไว้
   overflow-y:auto ไว้ให้เมนูที่ยาวเกินจอ (เช่นตอนเป็น admin มีเมนูเพิ่ม) ยังเลื่อนดูได้ในตัวเอง */
.sidebar{
  background:var(--sidebar);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:18px 12px;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
}

.sidebar-top{ display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.sidebar .brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; }
.sidebar .brand:hover{ text-decoration:none; }
.sidebar .brand-words{ min-width:0; }
.sidebar .brand-name{ color:#fff; font-size:15px; display:block; white-space:nowrap; }
.sidebar .brand-sub{ display:block; color:var(--sidebar-soft); white-space:nowrap; }

/* ต้องสว่างพอให้เห็นบนพื้นเมนูสีเข้ม — เดิมจางจนกลืนไปกับพื้นหลัง */
.sidebar-toggle{
  margin-left:auto;
  flex-shrink:0;
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .12s, border-color .12s;
}
.sidebar-toggle:hover{
  background:var(--accent);
  border-color:var(--accent);
}

.nav-icon{ width:18px; text-align:center; flex-shrink:0; font-size:13px; }
.nav-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- สถานะย่อ: เหลือเฉพาะไอคอน ---------- */
.app.sidebar-collapsed .sidebar{ padding:18px 8px; }
.app.sidebar-collapsed .brand-words,
.app.sidebar-collapsed .nav-text,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .foot-words,
.app.sidebar-collapsed .foot-logout{ display:none; }

.app.sidebar-collapsed .sidebar-top{ flex-direction:column; gap:10px; }
.app.sidebar-collapsed .sidebar-toggle{ margin-left:0; }
.app.sidebar-collapsed .nav-item{ justify-content:center; padding:10px 0; position:relative; }
.app.sidebar-collapsed .nav-badge{
  position:absolute;
  top:2px; right:4px;
  margin-left:0;
  padding:0 5px;
  font-size:10px;
}
.app.sidebar-collapsed .sidebar-foot{ justify-content:center; }

/* ป้ายชื่อเมนูตอนย่อ — ไม่งั้นเดาไม่ออกว่าไอคอนไหนคืออะไร */
.app.sidebar-collapsed .nav-item::after{
  content:attr(data-tip);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  background:var(--ink);
  color:#fff;
  font-size:12px;
  padding:5px 9px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  z-index:50;
}
.app.sidebar-collapsed .nav-item:hover::after{ opacity:1; }

.nav-label{
  font-size:11px;
  color:var(--sidebar-soft);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin:18px 8px 8px;
  font-family:'Prompt';
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:7px;
  margin-bottom:2px;
  color:#EDEFF2;
  font-size:13.5px;
}
.nav-item:hover{ background:rgba(255,255,255,.05); text-decoration:none; }
.nav-item.active{ background:rgba(255,255,255,.09); }
.nav-badge{
  margin-left:auto;
  background:var(--overdue);
  color:#fff;
  font-size:11px;
  padding:1px 7px;
  border-radius:10px;
  font-family:'IBM Plex Mono';
}

.sidebar-foot{
  margin-top:auto;
  padding:12px 10px 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:9px;
}
.avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:#3A4453;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  font-family:'Prompt';
  flex-shrink:0;
}
.foot-words{ min-width:0; }
.foot-name{ font-size:12.5px; color:#D6DAE1; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.foot-role{ font-size:10.5px; color:var(--sidebar-soft); display:block; white-space:nowrap; }
.foot-logout{ margin-left:auto; color:var(--sidebar-soft); font-size:16px; }
.foot-logout:hover{ color:#fff; text-decoration:none; }

.main{ display:flex; flex-direction:column; min-width:0; }

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:18px 28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
/* กล่องจดหมายกับกระดิ่งอยู่คู่กัน — เป็นสัญญาณส่วนตัวเหมือนกัน ไม่ใช่เมนูงาน */
.topbar-right{ position:relative; flex-shrink:0; display:flex; align-items:center; gap:8px; }

/* ---------- กระดิ่งแจ้งเตือน ---------- */
.notif-bell{
  position:relative;
  width:38px; height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font-size:16px;
  cursor:pointer;
  line-height:1;
}
.notif-bell:hover{ background:#F7F8FA; }
/* ปุ่มกล่องจดหมายเป็น <a> จึงต้องจัดกึ่งกลางเองและตัดเส้นใต้ของลิงก์ทิ้ง */
a.notif-bell{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; }
a.notif-bell:hover{ color:var(--accent); text-decoration:none; }
a.notif-bell.is-active{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); }
.notif-badge{
  position:absolute;
  top:-5px; right:-5px;
  min-width:18px;
  padding:0 5px;
  height:18px;
  border-radius:9px;
  background:var(--overdue);
  color:#fff;
  font-family:'IBM Plex Mono';
  font-size:10px;
  line-height:18px;
}
.notif-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:340px;
  max-height:420px;
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(28,36,48,.16);
  z-index:100;
}
.notif-row{
  display:block;
  padding:11px 14px;
  border-bottom:1px solid #F4F5F7;
  color:var(--ink);
}
.notif-row:hover{ background:#FAFBFC; text-decoration:none; }
.notif-row.is-unread{ background:#F3FAF9; }
.notif-row b{ display:block; font-size:13px; font-weight:500; line-height:1.5; }
.notif-row span{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.notif-row em{ display:block; font-size:10.5px; color:#A8B0BB; font-style:normal; margin-top:3px; }
.notif-all{ display:block; padding:10px; text-align:center; font-size:12.5px; }
.notif-empty{ padding:26px; text-align:center; font-size:12.5px; color:var(--ink-soft); }

/* ---------- หน้ารายการแจ้งเตือน ---------- */
.notif-list{ list-style:none; margin:0; padding:0; }
.notif-item{ display:flex; gap:11px; padding:13px 18px; border-bottom:1px solid #F4F5F7; }
.notif-item:last-child{ border-bottom:none; }
.notif-item.is-unread{ background:#F3FAF9; }
.notif-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; background:var(--planned); }
.notif-overdue{ background:var(--overdue); }
.notif-due_soon{ background:var(--amber); }
.notif-at_risk{ background:var(--amber); }
.notif-mentioned{ background:var(--accent); }
.notif-assigned{ background:var(--progress); }
.notif-commented{ background:var(--progress); }
.notif-body{ min-width:0; }
.notif-title{ display:block; font-size:13.5px; font-weight:500; line-height:1.5; }
.notif-msg{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.notif-meta{ display:flex; align-items:center; gap:7px; font-size:11px; color:#A8B0BB; margin-top:5px; }
.page-title{ font-family:'Prompt'; font-weight:600; font-size:20px; margin:0; }
.page-desc{ font-size:13px; color:var(--ink-soft); margin:5px 0 0; }

.content{ padding:24px 28px; flex:1; }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  margin-bottom:18px;
}
.card-title{ font-family:'Prompt'; font-weight:600; font-size:15px; margin:0 0 14px; }

/* ---------- ตาราง ---------- */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{
  text-align:left;
  font-family:'Prompt';
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table td{ padding:11px 12px; border-bottom:1px solid #EEF0F3; }
.table tr:last-child td{ border-bottom:none; }
.table tr:hover td{ background:#FAFBFC; }
.table-wrap{ overflow-x:auto; }

.badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:11px;
  font-size:11.5px;
  font-weight:500;
}
.badge-pending { background:#FDF4E3; color:#8A6212; }
.badge-active  { background:#E9F6F3; color:#1F6B5C; }
.badge-disabled{ background:#F1F2F4; color:#6B7280; }
.badge-admin   { background:var(--accent-soft); color:var(--accent-dark); }

.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--ink-soft);
  font-size:13.5px;
}

/* =====================================================================
   แถบเครื่องมือเหนือรายการ
   ===================================================================== */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.toolbar-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; }
.toolbar-actions{ display:flex; gap:8px; align-items:center; }
.toolbar .form-control{ padding:8px 11px; font-size:13.5px; }

/* =====================================================================
   การ์ดโครงการ
   ===================================================================== */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  gap:16px;
}

.project-card{
  position:relative;
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 18px 15px;
  overflow:hidden;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.project-card:hover{
  text-decoration:none;
  border-color:#CBD2DB;
  box-shadow:0 4px 16px rgba(28,36,48,.09);
  transform:translateY(-1px);
}

.project-stripe{ position:absolute; left:0; top:0; bottom:0; width:4px; }

.project-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}
.project-code{ font-size:11px; color:var(--ink-soft); letter-spacing:.3px; }

.project-name{
  font-family:'Prompt';
  font-weight:600;
  font-size:15px;
  line-height:1.4;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.project-meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; }

.project-dates{ font-size:12px; color:var(--ink-soft); margin-bottom:12px; }
.project-dates.is-overdue{ color:var(--overdue); }
.overdue-tag{
  display:inline-block;
  margin-left:6px;
  background:#FBEDEC;
  color:var(--overdue);
  font-family:'Noto Sans Thai';
  font-size:11px;
  padding:1px 7px;
  border-radius:10px;
}

.project-progress{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.progress-track{
  flex:1;
  height:6px;
  background:var(--line);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{ height:100%; background:var(--accent); border-radius:4px; }
.progress-num{ font-size:12px; color:var(--accent); font-weight:500; min-width:34px; text-align:right; }

.project-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:11px;
  border-top:1px solid #EEF0F3;
  font-size:12px;
}
.role-tag{
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  white-space:nowrap;
}

.badge-status-planning { background:#EEF0F3; color:#5B6472; }
.badge-status-active   { background:#EAF2FB; color:#26608F; }
.badge-status-on_hold  { background:#FDF4E3; color:#8A6212; }
.badge-status-completed{ background:#E9F6F3; color:#1F6B5C; }
.badge-status-cancelled{ background:#FBEDEC; color:#9E3B34; }

/* =====================================================================
   หน้ารายละเอียดโครงการ
   ===================================================================== */
.detail-grid{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; }

/* =====================================================================
   จังหวะงาน + สัญญาณเสี่ยง บนการ์ดภาพรวมโครงการ
   ชื่อคลาสขึ้นต้น pjm-pace / pjm-signal เฉพาะเจาะจง กันชนกับ overlay/badge ที่มีอยู่
   ===================================================================== */
.pjm-pace{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.pjm-pace-line{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pjm-pace-label{ font-size:12.5px; color:var(--ink-soft); width:72px; flex:none; }
.pjm-pace-track{ flex:1; height:8px; border-radius:4px; background:var(--canvas); overflow:hidden; }
.pjm-pace-fill{ display:block; height:100%; border-radius:4px; }
.pjm-pace-fill.is-time{ background:var(--planned); }
.pjm-pace-fill.is-work{ background:var(--accent); }
.pjm-pace-num{ font-size:12.5px; width:40px; text-align:right; flex:none; color:var(--ink); }
.pjm-pace-note{ font-size:12.5px; color:var(--overdue); margin-top:4px; }
.pjm-pace-note b{ font-weight:600; }

.pjm-signal-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pjm-signal{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; padding:5px 11px; border-radius:999px; border:1px solid;
  text-decoration:none;
}
a.pjm-signal:hover{ filter:brightness(.96); }
.pjm-signal b{ font-size:13.5px; font-weight:600; }
.pjm-risk-filter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pjm-risk-filter-label{ font-size:12.5px; color:var(--ink-soft); }
.pjm-risk-filter .pjm-signal{ cursor:pointer; font-family:inherit; }
.pjm-risk-filter .pjm-signal.is-active{ box-shadow:0 0 0 2px var(--ink) inset; }
.pjm-risk-clear{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; color:var(--ink-soft); text-decoration:underline; padding:4px;
}

.pjm-signal.is-overdue{ background:#FBEDEC; border-color:#F0C9C6; color:var(--overdue); }
.pjm-signal.is-stale  { background:#FDF4E3; border-color:#F5DFB0; color:#8A6212; }
.pjm-signal.is-flagged{ background:#FDF8E3; border-color:#F0E4B0; color:#8A7212; }
.pjm-signal.is-ready  { background:#E9F6F3; border-color:#B9E2D9; color:#1F6B5C; }

/* แท่งเงา baseline บน Gantt — ตั้งได้เฉพาะสิ่งที่เหมือนกันทุกชิ้น
   ตำแหน่ง/ขนาด (x,y,width,height) คำนวณใน JS เท่านั้น (กฎข้อ 14) */
.pjm-base{ fill:var(--ink-soft); opacity:.35; pointer-events:none; }

/* บอกเหตุผลที่ปุ่มหายไป บนแท็บ Table/Gantt/Messages ของโครงการที่ปิดแล้ว */
.pjm-closed-note{
  font-size:12.5px; color:#26608F; background:#EAF2FB; border:1px solid #C6DCF3;
  border-radius:var(--radius); padding:8px 12px; margin-bottom:14px;
}
.pjm-closed-note a{ color:#26608F; font-weight:500; }

/* แถบ Baseline บนหน้าโครงการ — "แผนที่ตกลงกันไว้" ที่ใช้วัด KPI */
.pjm-baseline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:18px; font-size:13px;
  border:1px solid var(--line); border-left:3px solid var(--ink-soft);
  border-radius:var(--radius); background:var(--surface);
}
.pjm-baseline.is-drift{ border-left-color:var(--overdue); }
.pjm-baseline-icon{ font-size:16px; flex:none; }
.pjm-baseline-drift{ color:var(--overdue); font-weight:600; }

/* รายการงานในหน้า "งานของฉัน" — แถวเดียวข้ามโครงการ ไม่ใช่ตารางแบบมีลำดับชั้น
   หัวคอลัมน์กับแถวใช้ grid ชุดเดียวกันเสมอ (แบบเดียวกับ .tl-head/.tl-row)
   ถ้าใช้ flex คอลัมน์ป้ายจะกว้างไม่คงที่ แล้วหัวตารางจะเลื่อนไม่ตรงกับข้อมูล */
.my-list{ display:flex; flex-direction:column; }
.my-head,
.my-row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 150px 76px 60px 78px 82px;
  align-items:center; column-gap:10px;
  padding:10px 12px 10px 14px;
}
/* เลขข้อ (WBS) ชุดเดียวกับหน้า Table/Gantt — คิดที่ wbs_map() ใน pjm_helper ที่เดียว */
.my-no{
  font-size:11.5px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.my-head{
  padding-top:0; padding-bottom:0; height:34px;
  border-bottom:1.5px solid var(--line);
  background:#FAFBFC;
  font-family:'Prompt'; font-size:10.5px; letter-spacing:.6px;
  color:var(--ink-soft); white-space:nowrap;
}
.my-head-right{ text-align:right; }
.my-row{ border-bottom:1px solid var(--line); }
.my-row:last-child{ border-bottom:none; }
.my-row.is-cleared{ opacity:.4; text-decoration:line-through; }
.my-main{ min-width:0; }
.my-name{
  display:block; font-size:13.5px; color:var(--ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.my-name:hover{ color:var(--accent); }
.my-risk,
.my-priority{ display:flex; min-width:0; }
.my-date{ font-size:12px; color:var(--ink-soft); text-align:right; }
.my-left{ font-size:12px; color:var(--ink-soft); text-align:right; }
.my-date.is-overdue, .my-left.is-overdue{ color:var(--overdue); }
.my-left.is-soon{ color:var(--amber); }

/* ผู้มอบหมายงานให้เรา — ชื่อยาวให้ตัดด้วย ... ไม่ให้ดันคอลัมน์วันที่หาย */
.my-assigner{
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:12px; color:var(--ink-soft);
}
.my-assigner-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* หัวกลุ่มโครงการ — ชื่อโครงการอยู่ที่นี่ที่เดียว ไม่ซ้ำทุกแถว · กดทั้งแถวเพื่อยุบ-กาง */
.my-group{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 9px 10px;
  background:#F7F9FA; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none;
}
.my-group:hover{ background:#F1F4F6; }
.my-group:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ปุ่ม +/− หน้าหัวกลุ่ม — สลับด้วย CSS ไม่ใช่ innerHTML (lucide แปลง <i> เป็น <svg> ไปแล้ว) */
.my-group-toggle{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:none;
  border:1px solid var(--line); border-radius:4px;
  background:var(--surface); color:var(--ink-soft);
}
.my-group-toggle svg{ width:12px; height:12px; }
.my-group:hover .my-group-toggle{ color:var(--accent); border-color:var(--accent); }
.my-group-ico-closed{ display:none; }
.my-group.is-collapsed .my-group-ico-open{ display:none; }
.my-group.is-collapsed .my-group-ico-closed{ display:block; }
.my-group-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.my-group-name{
  font-family:'Prompt'; font-weight:600; font-size:12.5px;
  color:var(--ink); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.my-group-name:hover{ color:var(--accent); }
.my-group-code{ color:var(--ink-soft); font-size:11.5px; margin-right:4px; }
.my-group-tags{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.my-group-count{ font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
/* เส้นสีโครงการทางซ้าย — padding-left ของแถวลดลง 3px เพื่อให้คอลัมน์ยังตรงกับหัวตาราง */
.my-group-body{ border-left:3px solid var(--line); }
.my-group-body .my-row{ padding-left:11px; }

@media (max-width:900px){
  .my-head,
  .my-row{ grid-template-columns:46px minmax(0,1fr) 40px 76px 82px; }
  .my-assigner-name{ display:none; }   /* เหลือแต่วงกลมย่อชื่อ ยังรู้ว่าใครมอบ */
  /* ตัด "ความสำคัญ" กับ "กำหนดส่ง" ก่อนคอลัมน์อื่น — ธงกังวลบอกเรื่องที่ต้องรีบจัดการกว่า
     และ "เหลือเวลา" แทนวันกำหนดส่งได้ · ถ้าไม่ตัด ชื่องานจะเหลือ ~115px จนอ่านไม่ออก */
  .my-priority, .my-date,
  .my-head > :nth-child(5), .my-head > :nth-child(6){ display:none; }
  /* หัวคอลัมน์ยาวกว่าช่อง 40px จะล้นไปทับคอลัมน์ถัดไป
     ซ่อนด้วย visibility ไม่ใช่ display เพราะ display:none ใน grid จะดันคอลัมน์ที่เหลือเลื่อน */
  .my-head > :nth-child(3){ visibility:hidden; }
}
@media (max-width:700px){
  .my-head,
  .my-row{ grid-template-columns:46px minmax(0,1fr) 82px; }
  /* ซ่อนคอลัมน์กลางทั้งหมด เหลือ # + งาน + เหลือเวลา ให้ตรงกับ template 3 คอลัมน์ */
  .my-risk, .my-priority, .my-date, .my-assigner,
  .my-head > :nth-child(3), .my-head > :nth-child(4),
  .my-head > :nth-child(5), .my-head > :nth-child(6){ display:none; }
}

/* การ์ดผู้ดูแลโครงการบนหน้าภาพรวมผู้บริหาร */
.owner-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.owner-card{ border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--surface); }
.owner-card.is-alert{ border-color:#F0C9C6; }
.owner-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.owner-name{
  display:block; font-family:'Prompt'; font-weight:500; font-size:13.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.owner-dept{ display:block; font-size:11.5px; color:var(--ink-soft); }
.owner-nums{ display:flex; gap:14px; flex-wrap:wrap; }
.owner-num{ display:flex; flex-direction:column; line-height:1.3; }
.owner-num b{ font-size:17px; font-weight:600; color:var(--ink); }
.owner-num span{ font-size:11px; color:var(--ink-soft); }
.owner-num.is-ongoing b{ color:var(--progress); }
.owner-num.is-done b{ color:var(--done); }
.owner-alert{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--overdue); }

/* ป้ายบนการ์ดหน้ารายการโครงการ — เล็กกว่าในหน้าโครงการเพราะการ์ดแคบ */
.project-flags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.project-flags .pjm-signal{ font-size:11.5px; padding:3px 9px; }
.project-flags .pjm-signal b{ font-size:12.5px; }
.stat-label{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  font-family:'Prompt';
  margin-bottom:5px;
}
.stat-value{ font-family:'Prompt'; font-weight:700; font-size:24px; line-height:1.1; }

.table-plain th{
  text-transform:none;
  letter-spacing:0;
  font-size:12.5px;
  width:100px;
  padding-left:0;
  border-bottom:1px solid #EEF0F3;
}
.table-plain td{ padding-right:0; }
.table-plain tr:hover td{ background:transparent; }

.member-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #EEF0F3;
}
.member-row:last-child{ border-bottom:none; }
.avatar-light{ background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.member-name{ display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-dept{ display:block; font-size:11.5px; color:var(--ink-soft); }

/* ---------- radio แบบมีคำอธิบาย ---------- */
.radio-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:8px;
  cursor:pointer;
  font-weight:400;
}
.radio-row:hover{ border-color:#CBD2DB; background:#FAFBFC; }
.radio-row input{ margin-top:3px; flex-shrink:0; }
.radio-row b{ font-size:13.5px; font-weight:500; display:block; }

/* ---------- เลือกสี ---------- */
.color-picker{ display:flex; gap:9px; flex-wrap:wrap; }
.color-swatch{
  width:30px; height:30px;
  border-radius:7px;
  cursor:pointer;
  position:relative;
  border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
.color-swatch input{ position:absolute; opacity:0; width:0; height:0; }
.color-swatch:has(input:checked){ border-color:var(--ink); transform:scale(1.08); }

@media (max-width:900px){
  .detail-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   แท็บ
   ===================================================================== */
.tabs{ display:flex; gap:2px; }
.tab{
  font-family:'Prompt';
  font-weight:500;
  font-size:13.5px;
  padding:9px 15px;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
}
.tab:hover{ color:var(--ink); text-decoration:none; }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-count{
  display:inline-block;
  background:var(--overdue);
  color:#fff;
  font-family:'IBM Plex Mono';
  font-size:10.5px;
  padding:1px 6px;
  border-radius:9px;
  vertical-align:1px;
}

/* =====================================================================
   กล่องข้อความที่แท็กถึงเรา
   ===================================================================== */
.msg-card{ padding:16px 18px; }
.msg-card.is-unread{ border-left:3px solid var(--accent); background:#FBFDFD; }

.msg-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.msg-head-text b{ font-size:13.5px; font-weight:500; }
.msg-time{ font-size:11.5px; color:var(--ink-soft); margin-left:7px; }
.msg-new{
  margin-left:auto;
  background:var(--accent);
  color:#fff;
  font-size:10.5px;
  padding:2px 8px;
  border-radius:10px;
}

.msg-context{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  font-size:12.5px;
  padding:7px 10px;
  background:#F7F8FA;
  border-radius:var(--radius);
  margin-bottom:10px;
}
.msg-project{ font-weight:500; }
.msg-due{ margin-left:auto; font-size:11.5px; color:var(--ink-soft); }
.msg-due.is-overdue{ color:var(--overdue); font-weight:500; }

.msg-body{ font-size:13.5px; line-height:1.75; word-break:break-word; }
.msg-actions{ display:flex; gap:14px; margin-top:11px; }

.msg-replies{ margin-top:11px; padding-left:12px; border-left:2px solid var(--line); }
.msg-reply{ padding:7px 0; font-size:13px; }
.msg-reply b{ font-weight:500; }
.msg-reply span{ font-size:11px; color:var(--ink-soft); margin-left:6px; }
.msg-reply div{ line-height:1.7; margin-top:2px; }

.msg-reply-form{ margin-top:11px; }
.msg-reply-form textarea{ resize:vertical; font-size:13.5px; }

/* =====================================================================
   ตารางงานแบบแถวๆ (ไม่ใช้ <table> เพื่อให้ยุบกิ่ง/ลากสลับลำดับง่ายกว่า)
   ===================================================================== */
.tasklist{ font-size:13.5px; }

.tl-head,
.tl-row{
  display:grid;
  /* คอลัมน์แรกต้องพอสำหรับจุดลาก + เลขแบบ 1.1.1 · คอลัมน์ปุ่มพอสำหรับ "+ ย่อย · แก้ไข · ลบ" */
  grid-template-columns:60px minmax(0,1fr) 76px 74px 52px 108px var(--tl-actions, 140px);
  align-items:center;
  column-gap:8px;
  padding:0 14px;
}
.tl-head{
  height:38px;
  border-bottom:1.5px solid var(--line);
  background:#FAFBFC;
  font-family:'Prompt';
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.tl-row{
  min-height:40px;
  border-bottom:1px solid var(--line);
}
.tl-row:hover{ background:#FAFBFC; }

/* เส้นแบ่งคอลัมน์ — อ่านค่าตามแนวตั้งได้ง่ายกว่าตารางไร้เส้น */
.tl-head > span,
.tl-row > span{
  border-right:1px solid #EEF0F3;
  height:100%;
  display:flex;
  align-items:center;
  padding-right:8px;
}
.tl-head > span:last-child,
.tl-row > span:last-child{ border-right:none; padding-right:0; }
.tl-row > .tl-name{ flex-wrap:wrap; }

/* คอลัมน์ # เป็นที่จับลาก — ต้องมีสัญญาณบอกให้ชัด ไม่งั้นไม่มีใครรู้ว่าลากได้ */
.tl-no{
  font-family:'IBM Plex Mono';
  font-size:11px;
  color:#B4BBC5;
  cursor:grab;
  user-select:none;
  position:relative;
  padding-left:13px;      /* เว้นที่ให้จุดลากอยู่ข้างหน้า ไม่ต้องไปทับเลข */
  white-space:nowrap;
}
.tl-no:active{ cursor:grabbing; }
/* เลขบอกลำดับชั้น (1.1.1) จึงห้ามซ่อนตอน hover เหมือนเดิม — โชว์จุดลากไว้ข้างหน้าแทน */
.tl-row:hover .tl-no{ color:var(--ink-soft); }
.tl-row:hover .tl-no::before{
  content:'⠿';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  color:#B4BBC5;
  font-size:13px;
  letter-spacing:-1px;
}
/* checkbox อยู่ในคอลัมน์ชื่อ จึงย่อหน้าตามชั้นงานไปด้วย */
.tl-name input[type=checkbox]{ cursor:pointer; width:16px; height:16px; flex-shrink:0; }
.tl-check-blank{ display:block; width:16px; flex-shrink:0; }

.tl-name{ display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }

/* เส้นบอกชั้น — 1 เส้นต่อ 1 ชั้นที่ย่อหน้าเข้าไป ทำให้เห็นว่างานนี้อยู่ใต้ใคร */
.tl-name.has-guide{
  background-image:repeating-linear-gradient(to right, #E4E7EC 0 1px, transparent 1px 20px);
  background-repeat:no-repeat;
  background-position:left center;
}

/* ชี้ปุ่มลบแล้วเห็นทันทีว่า "ทั้งกิ่ง" ที่จะหายไปคือแถวไหนบ้าง */
.tasklist .tl-row.is-delete-target,
.tasklist .tl-row.is-delete-target:hover{ background:#FBEDEC; }
.tasklist .tl-row.is-delete-target .tl-name-text{ color:#9E3B34; }
.tl-name-text{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:13.5px;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.tl-name-text:hover{ color:var(--accent); text-decoration:underline; }

/* แถวหัวข้อ = งานที่มีงานย่อย ทำให้ดูเป็นหัวเรื่องไม่ใช่งานที่ต้องทำ */
.tl-row.is-section{ background:#FAFBFC; }
.tl-row.is-section .tl-name-text{ font-family:'Prompt'; font-weight:600; font-size:13.5px; }
.tl-row.is-section:hover{ background:#F5F7F9; }
.tl-progress-section{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft); }

/* บรรทัดรายการที่ต้องทำ/ของที่ต้องเตรียม — เป็นลูกของงาน ไม่ใช่งาน จึงเบากว่าหนึ่งระดับ */
.tl-row.is-check{ background:#FCFCFD; }
.tl-row.is-check:hover{ background:#F7F8FA; }
.tl-check-text{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.tl-row.is-check.is-done .tl-check-text{ text-decoration:line-through; color:#A7AEB9; }
/* ลากสลับลำดับได้ แต่ต้องอยู่ในงานเดียวกันเท่านั้น (เช็คฝั่ง JS) */
.tl-row.is-check .tl-no{ cursor:grab; }
.tl-row.is-check .tl-no:active{ cursor:grabbing; }

.tl-row.is-done .tl-name-text{ color:var(--ink-soft); text-decoration:line-through; }
.tl-row.is-milestone .tl-name-text{ color:#8A6212; }

.tl-owner{ display:flex; align-items:center; gap:4px; }
.avatar-dot{
  width:24px; height:24px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Prompt';
  font-size:11px;
  font-weight:500;
  flex-shrink:0;
}
.avatar-dot.is-empty{ background:#EEF0F3; color:#A8B0BB; }
.more-count{ font-size:10.5px; color:var(--ink-soft); }

.tl-start{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.tl-start.is-overdue{ color:var(--overdue); font-weight:500; }
.tl-dur{ font-family:'IBM Plex Mono'; font-size:11.5px; color:#9AA2AD; white-space:nowrap; }

.tl-progress{ display:flex; align-items:center; gap:7px; }
.mini-track{ flex:1; height:5px; background:var(--line); border-radius:3px; overflow:hidden; min-width:36px; }
.mini-fill{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.mini-num{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-soft); min-width:28px; text-align:right; }

/* ปุ่มต้องเห็นตลอด — เคยซ่อนไว้จนกว่าจะเอาเมาส์ชี้ ทำให้ผู้ใช้หาปุ่มลบไม่เจอ
   จางไว้ก่อนเพื่อไม่ให้แย่งสายตาจากชื่องาน แล้วชัดขึ้นตอนชี้แถว */
.tl-actions{ display:flex; gap:9px; justify-content:flex-end; }
.tl-actions .link-btn{ color:var(--ink-soft); transition:color .12s; }
.tl-row:hover .tl-actions .link-btn{ color:var(--accent); }
.tl-actions .link-btn.danger{ color:var(--ink-soft); }
.tl-row:hover .tl-actions .link-btn.danger{ color:var(--overdue); }

.tl-add{ display:flex; gap:8px; padding:12px 14px; border-bottom:1px solid #F4F5F7; }
.tl-foot{ padding:10px 14px; font-size:12px; color:var(--ink-soft); }

@media (max-width:900px){
  .tl-head,
  .tl-row{ grid-template-columns:30px minmax(0,1fr) 60px 100px; }
  .tl-start, .tl-dur, .tl-actions{ display:none; }
}

/* =====================================================================
   ตารางงาน (แบบเดิม — ยังใช้ในบางหน้า)
   ===================================================================== */
.task-table td{ vertical-align:middle; }
.task-row.is-root > td{ background:#FAFBFC; }
.task-row.is-root .task-name{ font-family:'Prompt'; font-weight:600; }
.task-row.is-milestone .task-name{ color:#8A6212; }

.task-name-cell{ display:flex; align-items:flex-start; gap:9px; }
.task-name{
  display:block;
  font-size:13.5px;
  line-height:1.45;
  background:none;
  border:none;
  padding:0;
  text-align:left;
  font-family:inherit;
  color:inherit;
  cursor:pointer;
}
.task-name:hover{ color:var(--accent); text-decoration:underline; }
.task-sub{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }

.status-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.status-not_started{ background:var(--planned); }
.status-in_progress{ background:var(--progress); }
.status-done       { background:var(--done); }
.status-blocked    { background:var(--overdue); }

.milestone-dot{
  width:11px; height:11px;
  background:var(--amber);
  transform:rotate(45deg);
  border-radius:2px;
  flex-shrink:0;
  margin-top:5px;
}

.task-sub span{
  font-size:10.5px;
  padding:1px 7px;
  border-radius:9px;
  white-space:nowrap;
  line-height:1.7;
}
.tag-milestone      { background:#FDF4E3; color:#8A6212; }
.tag-overdue        { background:#FBEDEC; color:#9E3B34; }
.tag-stale          { background:#FDF0E5; color:#9C5A22; }
.tag-risk           { background:#FDF4E3; color:#8A6212; }
.tag-priority-high  { background:#EAF2FB; color:#26608F; }
.tag-priority-critical{ background:#FBEDEC; color:#9E3B34; }
.tag-plain          { background:#F1F2F4; color:#5B6472; }
/* "หลุดกรอบเวลา" — แยกคลาสจาก tag-risk (ที่ใช้กับ "แจ้งกังวล") เพราะคนละเรื่องกัน
   ตัวหนังสือแดงล้วน ไม่มีพื้นไม่มีขอบ ให้ต่างจากป้ายอื่นที่เป็นก้อนสีอ่อน */
.tag-outofrange     { background:none; color:#C0392B; font-weight:600; font-size:10.5px; padding-left:0; padding-right:0; }

.assignee-chip{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.avatar-sm{ width:24px; height:24px; font-size:10px; }
.assignee-name{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.badge-task-not_started{ background:#F1F2F4; color:#5B6472; }
.badge-task-in_progress{ background:#EAF2FB; color:#26608F; }
.badge-task-done       { background:#E9F6F3; color:#1F6B5C; }
.badge-task-blocked    { background:#FBEDEC; color:#9E3B34; }

.progress-badge{
  font-size:12.5px;
  color:var(--ink-soft);
  padding:5px 12px;
  background:var(--accent-soft);
  border-radius:14px;
  white-space:nowrap;
}
.progress-badge b{ font-family:'Prompt'; color:var(--accent-dark); margin-left:4px; }

.drag-cell{ padding-right:0 !important; padding-left:10px !important; width:26px; }
.drag-handle{
  display:inline-block;
  color:#C7CDD6;
  cursor:grab;
  font-size:13px;
  letter-spacing:-3px;
  user-select:none;
}
.drag-handle:active{ cursor:grabbing; }
.task-row:hover .drag-handle{ color:var(--ink-soft); }
.row-ghost{ opacity:.45; background:var(--accent-soft) !important; }
.row-ghost td{ background:var(--accent-soft) !important; }

.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:7px;
}
.checkbox-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:13px;
  font-weight:400;
  cursor:pointer;
}
.checkbox-item:hover{ border-color:#CBD2DB; background:#FAFBFC; }

/* =====================================================================
   Gantt (ปรับ Frappe Gantt ให้เข้าโทน wireframe)
   ===================================================================== */
/* เลย์เอาต์ 2 คอลัมน์ตาม wireframe: ชื่องานอยู่นิ่งทางซ้าย · ไทม์ไลน์เลื่อนทางขวา
   ทำให้ไม่ต้องเอาชื่องานไปแปะบนแท่ง (ซึ่งล้นทับกันเมื่องานสั้น) */
.gantt-shell{
  display:grid;
  grid-template-columns:445px minmax(0, 1fr);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.gantt-names{
  border-right:1px solid var(--line);
  background:var(--surface);
  position:relative;
  z-index:1;
}

/* คอลัมน์ตารางซ้าย — กว้างคงที่ทุกแถวเพื่อให้หัวตารางกับข้อมูลตรงกัน */
.gantt-names-head,
.gantt-name-row{
  display:grid;
  /* คอลัมน์วันที่ต้องกว้างพอสำหรับ "15 ส.ค. 69" ไม่งั้นตัวเลขจะชนกัน */
  grid-template-columns:34px minmax(0,1fr) 62px 78px 46px;
  align-items:center;
  column-gap:8px;
  padding:0 12px;
}
.gcol-no{ font-family:'IBM Plex Mono'; font-size:11px; color:#B4BBC5; }
.gcol-dur{ font-family:'IBM Plex Mono'; font-size:11.5px; color:#9AA2AD; white-space:nowrap; }

.gantt-name-row.is-section{ background:#FAFBFC; }
.gantt-name-row.is-section .gantt-name-text{ font-family:'Prompt'; font-weight:600; }
.gantt-name-row.is-section:hover{ background:#F5F7F9; }
.gantt-name-row.is-done .gantt-name-text{ color:var(--ink-soft); text-decoration:line-through; }
.gantt-names-head{
  height:var(--head-h);
  align-items:flex-end;
  padding-bottom:9px;
  font-family:'Prompt';
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  background:var(--surface);
  white-space:nowrap;
}
.gantt-name-row{
  height:var(--row-h);
  border-bottom:1px solid #F4F5F7;
}
.gantt-name-row:hover{ background:#FAFBFC; }

.gcol-name{ display:flex; align-items:center; gap:7px; min-width:0; }
.gcol-owner{ display:flex; align-items:center; gap:5px; min-width:0; }
.gcol-owner-name{
  font-size:11.5px;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gcol-date{ font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.gcol-date.is-overdue{ color:var(--overdue); font-weight:500; }
.avatar-xs{ width:20px; height:20px; font-size:9px; flex-shrink:0; }

.input-sm{ padding:6px 10px; font-size:13px; }

/* ---------- ตารางแผนก ---------- */
.dept-head,
.dept-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 62px 74px 96px 210px;
  align-items:center;
  column-gap:10px;
  padding:0 20px;
}
.dept-head{
  height:36px;
  border-bottom:1px solid var(--line);
  font-family:'Prompt';
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.dept-row{
  min-height:46px;
  border-bottom:1px solid #F4F5F7;
}
.dept-row:last-child{ border-bottom:none; }
.dept-row:hover{ background:#FAFBFC; }

.dept-name{ min-width:0; font-size:13.5px; }
.dept-count{ font-size:12px; color:var(--ink-soft); }
.dept-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; white-space:nowrap; }

.js-dept-form{ display:flex; gap:6px; align-items:center; }
.js-dept-form .form-control{ flex:1; min-width:0; }

@media (max-width:900px){
  .dept-head, .dept-row{ grid-template-columns:26px minmax(0,1fr) 96px; }
  .dept-count, .dept-head span:nth-child(3), .dept-head span:nth-child(4){ display:none; }
  .dept-actions{ grid-column:1/-1; justify-content:flex-start; padding-bottom:10px; }
}

.search-note{
  font-size:12.5px;
  color:var(--ink-soft);
  background:var(--accent-soft);
  border-radius:var(--radius);
  padding:8px 12px;
  margin-bottom:10px;
}
.search-note b{ color:var(--accent-dark); }

.gantt-name-text{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.gantt-name-text:hover{ color:var(--accent); text-decoration:underline; }
.gantt-name-row.is-root .gantt-name-text{ font-family:'Prompt'; font-weight:600; }

/* ปุ่มพับกิ่งงาน — ใช้ทั้งในตารางและคอลัมน์ซ้ายของ Gantt */
/* ปุ่มพับกิ่ง — ต้องกดโดนง่ายและเห็นชัดว่ากดได้
   เดิมเล็กและสีจางจนคนไม่รู้ว่าเป็นปุ่ม */
.tree-toggle{
  width:30px;
  height:30px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  font-size:19px;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
  border-radius:5px;
  transition:transform .12s, background .12s;
}
.tree-toggle:hover{ background:var(--accent-soft); color:var(--accent-dark); }
.tree-toggle:active{ background:#C9E5E3; }
.tree-toggle.is-collapsed{ transform:rotate(-90deg); }
.tree-toggle.is-empty{ cursor:default; pointer-events:none; }
.tree-toggle.is-empty:hover{ background:none; }

/* ไอคอนเตือน — จุดเล็ก 6px แบบเดิมมองข้ามง่ายเกินไป */
.flag-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px; height:19px;
  border-radius:5px;
  font-size:12px;
  line-height:1;
  cursor:help;
}
.flag-icon.risk    { background:#FDF0CE; color:#946200; }
.flag-icon.overdue { background:#FBE0DE; color:#B03A31; }
.flag-icon.outofrange { background:#FBE0DE; color:#C0392B; }

.dot-flag{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-flag.overdue{ background:var(--overdue); }
.dot-flag.risk{ background:var(--amber); }

/* เครื่องหมายเตือนบนแท่ง Gantt */
.pjm-warn circle{ stroke:#fff; stroke-width:1.5; }
.pjm-warn.is-risk circle{ fill:var(--amber); }
.pjm-warn.is-overdue circle{ fill:var(--overdue); }
.pjm-warn-mark{
  font-family:'Prompt',sans-serif;
  font-size:12px;
  font-weight:700;
  fill:#fff;
  pointer-events:none;
}

/* ตัวเลื่อนแนวนอนจริงคือ .gantt-container ที่ Frappe สร้างขึ้นเอง
   ตัวนี้เป็นแค่กล่องจำกัดความกว้าง ห้ามใส่ overflow ซ้อนอีกชั้น */
.gantt-scroll{ min-width:0; }
.gantt-scroll .gantt-container{ overflow-x:auto; overflow-y:hidden; }
.gantt-scroll .gantt-container::-webkit-scrollbar{ height:9px; }
.gantt-scroll .gantt-container::-webkit-scrollbar-track{ background:#F4F6F8; }
.gantt-scroll .gantt-container::-webkit-scrollbar-thumb{ background:#C7CDD6; border-radius:5px; }
.gantt-scroll .gantt-container::-webkit-scrollbar-thumb:hover{ background:#AEB6C2; }

.btn-group{ display:inline-flex; }
.btn-group .btn{ border-radius:0; margin-left:-1px; }
.btn-group .btn:first-child{ border-radius:var(--radius) 0 0 var(--radius); margin-left:0; }
.btn-group .btn:last-child{ border-radius:0 var(--radius) var(--radius) 0; }
.btn-group .btn.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-dark);
  position:relative;
  z-index:1;
}

.gantt-legend{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  padding:0 0 14px;
}
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.legend-swatch{ width:10px; height:10px; border-radius:2px; }
.legend-swatch.diamond{ transform:rotate(45deg); }

/* พื้นแท่ง = สีอ่อนของสถานะนั้น (ไม่ใช่เทากลางๆ ทุกอัน)
   ทำให้บอกสถานะได้แม้ยังคืบหน้า 0% */
.gantt .bar-wrapper .bar          { fill:var(--planned-fill); stroke:var(--planned); stroke-width:1; }
.gantt .bar-wrapper .bar-progress { fill:var(--progress); }

.gantt .bar-wrapper.st-normal  .bar{ fill:#E7F0FA; stroke:#B9D3EE; }
.gantt .bar-wrapper.st-done    .bar{ fill:#E3F3EF; stroke:#A9DACF; }
.gantt .bar-wrapper.st-done    .bar-progress{ fill:var(--done); }
.gantt .bar-wrapper.st-overdue .bar{ fill:#FAE7E6; stroke:#EBB9B5; }
.gantt .bar-wrapper.st-overdue .bar-progress{ fill:var(--overdue); }
.gantt .bar-wrapper.st-blocked .bar{ fill:#FAE7E6; stroke:#EBB9B5; }
.gantt .bar-wrapper.st-blocked .bar-progress{ fill:var(--overdue); }

/* Milestone = หมุดสี่เหลี่ยมหมุน 45° ไม่ใช่แท่งยาว
   ตั้งขนาดผ่าน CSS ได้เพราะ width/height ของ SVG เป็น geometry property */
.gantt .bar-wrapper.st-milestone .bar{
  fill:var(--amber);
  stroke:#C88C06;
  width:15px;
  height:15px;
  transform:rotate(45deg);
  transform-box:fill-box;
  transform-origin:center;
}
.gantt .bar-wrapper.st-milestone .bar-progress{ display:none; }

/* ชื่องานย้ายไปคอลัมน์ซ้ายแล้ว จึงไม่ต้องเขียนทับแท่งให้รกและอ่านไม่ออก */
.gantt .bar-label{ display:none; }

/* ** ยกเว้น Milestone ** — หมุดเป็นจุดเล็กๆ ไม่มีความยาวให้ดู
   ถ้าไม่มีชื่อกำกับ จะไล่สายตาหาไม่เจอว่าหมุดไหนคืออะไร
   วางชื่อไว้ขวาหมุด (Frappe จัดไว้กลางแท่งเดิมซึ่งกว้าง 1 วัน พอย่อเป็นหมุดจึงไปทับกัน) */
.gantt .bar-wrapper.st-milestone .bar-label{
  display:block;
  text-anchor:start;
  /* หมุดกว้าง ~21px เมื่อหมุน 45° (ครึ่งหนึ่ง ~11px จากจุดกึ่งกลางแท่ง)
     18px จึงเว้นช่องว่างจากหมุดราว 7px กำลังอ่านสบาย */
  transform:translateX(18px);
  font-family:'Noto Sans Thai',sans-serif;
  font-size:11px;
  font-weight:500;
  fill:#8A6212;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:3px;
  stroke-linejoin:round;
}

/* งานแม่ = แท่งสรุปของงานย่อย แยกด้วย "สีเทา" อย่างเดียว
   ความสูงเท่างานทั่วไป เพราะแท่งหนาไม่เท่ากันสะดุดตาจนดูเหมือนของเสีย

   ** ห้ามตั้ง y / height ที่นี่ ** — ใน SVG สองค่านี้เป็น geometry property
   ที่ CSS จะตั้งเป็น "ค่าสัมบูรณ์" ทับของเดิม ทำให้ทุกแท่งกระโดดไปอยู่ตำแหน่งเดียวกัน
   ถ้าจำเป็นต้องปรับโดยอิงค่าเดิม ให้คำนวณใน decorate() แทน */
.gantt .bar-wrapper.is-summary .bar{
  fill:url(#pjm-summary-hatch);
  stroke:#AAB3BF;
}
.gantt .bar-wrapper.is-summary .bar-progress{ fill:#6E7887; }
.gantt .bar-wrapper.is-summary .handle{ display:none; }

/* ไฮไลต์พร้อมกันทั้งคอลัมน์ชื่อและแท่ง เมื่อชี้แถวใดแถวหนึ่ง */
.gantt-name-row.is-hover{ background:var(--accent-soft) !important; }
.gantt .bar-wrapper.is-hover .bar{ stroke:var(--accent); stroke-width:1.5; }

/* ป้าย % ต่อท้ายแท่ง */
.pjm-pct{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  fill:var(--ink-soft);
  pointer-events:none;
}

/* เส้นตาราง: เดิมจางจนกะวันไม่ได้ */
.gantt .grid-header{ fill:var(--surface); stroke:var(--line); }

/* หัวตารางที่เราวาดเอง (Frappe ไม่รองรับภาษาไทย) */
.pjm-head-month{
  font-family:'Prompt',sans-serif;
  font-size:12px;
  font-weight:600;
  fill:var(--ink);
}
.pjm-head-week{
  font-family:'Noto Sans Thai',sans-serif;
  font-size:10.5px;
  fill:var(--ink-soft);
}
.pjm-head-day{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  fill:var(--ink);
}
.pjm-head-dow{
  font-family:'Noto Sans Thai',sans-serif;
  font-size:8.5px;
  fill:var(--ink-soft);
}
.pjm-head-day.is-weekend,
.pjm-head-dow.is-weekend{ fill:#A8B0BB; }
.pjm-head-sep{ stroke:var(--line); stroke-width:1; }
.pjm-head-sep.strong{ stroke:#CBD2DB; stroke-width:1.5; }
.gantt .row-line{ stroke:#F4F5F7; }
.gantt .tick{ stroke:#EDEFF2; }
.gantt .tick.thick{ stroke:#DDE1E6; }
.gantt .today-highlight{ display:none; }
.gantt .bar-wrapper:hover .bar{ filter:brightness(.96); }

/* ชั้นที่เราวาดเองทับ (วันหยุด / เส้นวันนี้) */
.pjm-weekend{ fill:#F7F8FA; }

/* วันนี้: แรเงาคอลัมน์จางๆ + เส้นแดงเส้นเดียว
   (เลิกใช้ป้าย "วันนี้" ลอยแล้ว เพราะไปทับตัวเลขวันที่) */
.pjm-today-band{ fill:#FDECEA; }
.pjm-today-line{ stroke:var(--overdue); stroke-width:2; }

/* เส้นเส้นตายของ Milestone
   ตั้งใจให้ "เบากว่า" เส้นวันนี้ชัดเจน — เส้นวันนี้มีเส้นเดียวและเป็นตัวอ้างอิงหลัก
   ส่วน milestone มีได้หลายเส้น ถ้าทำทึบเท่ากันจะแย่งสายตาจนอ่านกราฟไม่ออก */
.pjm-ms-line{
  stroke:#C88C06;
  stroke-width:1;
  stroke-dasharray:3 4;
  opacity:.5;
}
.pjm-ms-label{
  font-family:'Noto Sans Thai',sans-serif;
  font-size:10px;
  fill:#8A6212;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:2.5px;
  stroke-linejoin:round;
}

/* กล่องรอบตัวเลขวันที่ของวันนี้ในหัวตาราง */
.pjm-head-today-chip{ fill:var(--overdue); }
.pjm-head-day.is-today,
.pjm-head-dow.is-today{ fill:#fff; font-weight:600; }

/* popup: เดิมไม่ได้กำหนดความกว้าง ข้อความจึงตกบรรทัดละตัวอักษร
   ** ต้องซ่อนด้วย opacity:0 ตั้งต้น ** — Frappe สร้าง element นี้ไว้ตลอดเวลา
   พอเราให้ min-width/padding มัน จึงโผล่เป็นกล่องดำเปล่าค้างมุมซ้ายบน
   (Frappe สั่งแสดงด้วย inline style opacity:1 ซึ่งชนะกฎนี้อยู่แล้ว) */
.gantt-container .popup-wrapper{
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  background:var(--sidebar);
  border-radius:8px;
  font-family:'Noto Sans Thai',sans-serif;
  padding:11px 14px;
  width:max-content;
  max-width:280px;
  min-width:170px;
  white-space:normal;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.gantt-container .popup-wrapper .title{
  font-family:'Prompt';
  font-size:13px;
  font-weight:600;
  border:none;
  padding:0;
  margin:0 0 4px;
  line-height:1.45;
  color:#fff;
}
.gantt-container .popup-wrapper .subtitle{
  font-size:11.5px;
  line-height:1.7;
  padding:0;
  color:#C8CED8;
}
.gantt-container .popup-wrapper .pop-flag{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:11.5px;
  color:#F0B4AF;
}
/* เหตุผลที่กังวล — เน้นด้วยพื้นเหลืองเข้มให้เด่นกว่าบรรทัดอื่นในกล่อง */
.gantt-container .popup-wrapper .pop-risk{
  margin-top:7px;
  padding:6px 9px;
  border-radius:5px;
  background:rgba(227,160,8,.18);
  border-left:3px solid var(--amber);
  font-size:11.5px;
  line-height:1.6;
  color:#F5D89A;
}
.gantt-container .popup-wrapper .pointer{ display:none; }

/* =====================================================================
   Modal (คู่กับ PJM.openModal ใน assets/js/pjm.js)
   ===================================================================== */
.pjm-modal{
  position:fixed;
  inset:0;
  background:rgba(28,36,48,.45);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:32px 16px;
  overflow-y:auto;
  z-index:9000;
}
.pjm-modal.is-open{ display:flex; }

.pjm-modal-box{
  background:var(--surface);
  border-radius:12px;
  width:100%;
  max-width:640px;
  box-shadow:0 12px 48px rgba(28,36,48,.22);
  animation:pjm-modal-in .16s ease-out;
}
@keyframes pjm-modal-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

.pjm-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.pjm-modal-title{ font-family:'Prompt'; font-weight:600; font-size:16px; margin:0; }
.pjm-modal-sub{ font-size:12.5px; color:var(--ink-soft); margin:3px 0 0; }
.pjm-modal-close{
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  padding:0 2px;
}
.pjm-modal-close:hover{ color:var(--ink); }

.pjm-modal-body{ padding:20px 22px; }
.pjm-modal-body .card{ border:none; padding:0; margin:0 0 20px; }
.pjm-modal-body .card:last-of-type{ margin-bottom:0; }
.pjm-modal-body .card-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  margin-bottom:11px;
}
.pjm-modal-foot{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 22px 18px;
  border-top:1px solid var(--line);
}
.pjm-modal-foot .spacer{ margin-left:auto; }

.pjm-modal-loading{ padding:48px; text-align:center; color:var(--ink-soft); }

/* =====================================================================
   Drawer รายละเอียดงาน (เลื่อนจากขวา)
   ===================================================================== */
.pjm-drawer{
  position:fixed;
  inset:0;
  background:rgba(28,36,48,.35);
  display:none;
  justify-content:flex-end;
  z-index:8500;
}
.pjm-drawer.is-open{ display:flex; }

.pjm-drawer-box{
  background:var(--surface);
  width:100%;
  max-width:560px;
  height:100%;
  overflow-y:auto;
  box-shadow:-8px 0 32px rgba(28,36,48,.16);
  animation:pjm-drawer-in .18s ease-out;
  display:flex;
  flex-direction:column;
}
@keyframes pjm-drawer-in{ from{ transform:translateX(24px); opacity:.4; } to{ transform:none; opacity:1; } }

.drawer-head{
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.drawer-eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.drawer-title{ font-family:'Prompt'; font-weight:600; font-size:17px; margin:0; line-height:1.4; }

.drawer-body{ padding:18px 22px 32px; }

.drawer-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.fact-label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ink-soft);
  font-family:'Prompt';
  margin-bottom:3px;
}
.fact-value{ display:block; font-size:13.5px; font-weight:500; }
.fact-value.is-overdue{ color:var(--overdue); }

.drawer-actions{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 0 0; }
.btn-risk{ border-color:#F5DFB0; background:#FDF4E3; color:#8A6212; }
.btn-risk:hover{ background:#FBEDD3; }

.risk-form{
  margin-top:12px;
  padding:14px;
  background:#FDF4E3;
  border:1px solid #F5DFB0;
  border-radius:var(--radius);
}
.risk-form label{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; }

.risk-banner{
  background:#FDF4E3;
  border:1px solid #F5DFB0;
  border-left:3px solid var(--amber);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:18px;
}
.risk-banner-title{ font-family:'Prompt'; font-weight:600; font-size:13px; color:#8A6212; margin-bottom:5px; }
.risk-banner-note{ font-size:13px; line-height:1.7; }
.risk-banner-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:7px; }

.drawer-section{ padding-top:22px; }
.drawer-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.drawer-section-head h3{
  font-family:'Prompt';
  font-weight:600;
  font-size:13.5px;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.count-pill{
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-family:'IBM Plex Mono';
  font-size:11px;
  padding:1px 8px;
  border-radius:10px;
}

.link-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--accent);
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
}
.link-btn:hover{ text-decoration:underline; }
.link-btn.danger{ color:var(--overdue); }

/* ---------- rich text ---------- */
.rich-text{ font-size:13.5px; line-height:1.8; }
.rich-text h2{ font-family:'Prompt'; font-size:15px; margin:14px 0 6px; }
.rich-text h3{ font-family:'Prompt'; font-size:14px; margin:12px 0 5px; }
.rich-text p{ margin:0 0 8px; }
.rich-text ul, .rich-text ol{ margin:0 0 8px; padding-left:22px; }
.rich-text li{ margin-bottom:3px; }
.rich-text blockquote{
  margin:0 0 8px;
  padding:6px 12px;
  border-left:3px solid var(--line);
  color:var(--ink-soft);
}
.rich-text pre{
  background:#F7F8FA;
  padding:10px 12px;
  border-radius:6px;
  font-family:'IBM Plex Mono';
  font-size:12px;
  overflow-x:auto;
}
.rich-text a{ text-decoration:underline; }

#desc-editor{ min-height:130px; }
.ql-toolbar.ql-snow, .ql-container.ql-snow{ border-color:var(--line); }
.ql-toolbar.ql-snow{ border-radius:var(--radius) var(--radius) 0 0; }
.ql-container.ql-snow{ border-radius:0 0 var(--radius) var(--radius); font-family:'Noto Sans Thai',sans-serif; font-size:13.5px; }

/* ---------- checklist ---------- */
.checklist{ list-style:none; margin:0; padding:0; }
.checklist-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 0;
  border-bottom:1px solid #F1F2F4;
}
.checklist-item:last-child{ border-bottom:none; }
.checklist-item input[type=checkbox]{ margin-top:3px; flex-shrink:0; cursor:pointer; }
.checklist-drag{ margin-top:2px; font-size:12px; }
.checklist-body{ flex:1; min-width:0; }
.checklist-title{ font-size:13.5px; line-height:1.5; }
.checklist-item.is-done .checklist-title{ text-decoration:line-through; color:var(--ink-soft); }
.checklist-qty{
  display:inline-block;
  margin-left:7px;
  background:#F1F2F4;
  color:#5B6472;
  font-size:11px;
  padding:1px 7px;
  border-radius:9px;
}
.checklist-meta{ display:block; font-size:11px; color:var(--ink-soft); margin-top:2px; }
.checklist-actions{ display:flex; gap:9px; flex-shrink:0; opacity:0; transition:opacity .12s; }
.checklist-item:hover .checklist-actions{ opacity:1; }

.checklist-add{ display:flex; gap:7px; margin-top:12px; }
.checklist-add .form-control{ padding:7px 10px; font-size:13px; }
.checklist-add #item_title{ flex:1; }

/* ---------- ไฟล์แนบ ---------- */
.file-list{
  list-style:none;
  margin:0;
  padding:0 4px 0 0;
  max-height:260px;
  overflow-y:auto;
}
.file-list::-webkit-scrollbar{ width:7px; }
.file-list::-webkit-scrollbar-track{ background:#F4F6F8; border-radius:4px; }
.file-list::-webkit-scrollbar-thumb{ background:#C7CDD6; border-radius:4px; }
.file-list::-webkit-scrollbar-thumb:hover{ background:#AEB6C2; }
.file-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #F4F5F7; }
.file-item:last-child{ border-bottom:none; }

.file-thumb{
  width:38px; height:38px;
  border-radius:6px;
  flex-shrink:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--planned-fill);
  border:1px solid var(--line);
}
.file-thumb img{ width:100%; height:100%; object-fit:cover; }
.file-thumb.is-doc{
  font-family:'Prompt';
  font-size:9.5px;
  font-weight:600;
  color:var(--ink-soft);
  letter-spacing:.3px;
}

.file-info{ flex:1; min-width:0; }
.file-name{
  display:block;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-meta{ display:block; font-size:11px; color:var(--ink-soft); margin-top:2px; }
.file-actions{ display:flex; gap:9px; flex-shrink:0; opacity:0; transition:opacity .12s; }
.file-item:hover .file-actions{ opacity:1; }

.file-drop{
  margin-top:12px;
  padding:16px;
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  text-align:center;
  transition:border-color .12s, background .12s;
}
.file-drop.is-over{ border-color:var(--accent); background:var(--accent-soft); }
.file-drop-text{ font-size:12.5px; color:var(--ink-soft); }

.file-progress{
  margin-top:8px;
  padding:8px 11px;
  border-radius:var(--radius);
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:12px;
}
.file-progress.is-error{ background:#FBEDEC; color:#9E3B34; }

/* ---------- คอมเมนต์ ---------- */
/* คอมเมนต์ก็จำกัดความสูงเช่นกัน — งานที่คุยกันเยอะจะดันช่องพิมพ์ตกจอ */
.comment-list{
  list-style:none;
  margin:0;
  padding:0 4px 0 0;
  max-height:320px;
  overflow-y:auto;
}
.comment-list::-webkit-scrollbar{ width:7px; }
.comment-list::-webkit-scrollbar-track{ background:#F4F6F8; border-radius:4px; }
.comment-list::-webkit-scrollbar-thumb{ background:#C7CDD6; border-radius:4px; }
.comment-list::-webkit-scrollbar-thumb:hover{ background:#AEB6C2; }
.comment-item{ display:flex; gap:10px; padding:11px 0; border-bottom:1px solid #F4F5F7; }
.comment-item:last-child{ border-bottom:none; }
.comment-body{ flex:1; min-width:0; }
.comment-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.comment-head b{ font-size:13px; font-weight:500; }
.comment-time{ font-size:11px; color:var(--ink-soft); }
.comment-edited{ font-size:10.5px; color:#A8B0BB; font-style:italic; }
.comment-actions{ display:flex; gap:9px; margin-left:auto; opacity:0; transition:opacity .12s; }
.comment-item:hover .comment-actions{ opacity:1; }
.comment-text{ font-size:13.5px; line-height:1.75; word-break:break-word; }

/* ชื่อที่ถูกแท็กใช้สีน้ำเงิน — แยกจากสีเขียวของแบรนด์ที่ใช้กับปุ่ม/ลิงก์ทั่วไป
   ทำให้กวาดตาหาได้ทันทีว่ามีใครถูกเรียกบ้างในคอมเมนต์ */
.mention{
  background:#E7F0FA;
  color:#1F5C9E;
  padding:1px 5px;
  border-radius:4px;
  font-weight:500;
  cursor:default;
}

.comment-form{ position:relative; margin-top:14px; }
.comment-form textarea{ resize:vertical; font-size:13.5px; }
.comment-form-foot{ display:flex; align-items:center; gap:8px; margin-top:8px; }

/* กล่องเลือกคนตอนพิมพ์ @ */
.mention-pop{
  position:absolute;
  left:0;
  bottom:calc(100% + 4px);
  width:100%;
  max-width:280px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(28,36,48,.14);
  overflow:hidden;
  z-index:20;
}
.mention-opt{
  display:flex;
  align-items:baseline;
  gap:7px;
  width:100%;
  padding:8px 11px;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
}
.mention-opt b{ font-size:13px; font-weight:500; }
.mention-opt span{ font-size:11px; color:var(--ink-soft); font-family:'IBM Plex Mono'; }

/* ตัวที่กำลังเลือกใช้สีน้ำเงินชุดเดียวกับป้ายชื่อที่ถูกแท็ก
   เพื่อให้เห็นความเชื่อมโยงว่า "เลือกอันนี้แล้วจะได้ป้ายสีนี้" */
.mention-opt.is-active{ background:#E7F0FA; }
.mention-opt.is-active b{ color:#1F5C9E; }

/* ---------- ประวัติ ----------
   จำกัดความสูงแล้วให้เลื่อนในตัวเอง ไม่งั้นงานที่แก้บ่อยจะดันส่วนอื่นตกไปไกลมาก */
.activity-list{
  list-style:none;
  margin:0;
  padding:0 4px 0 0;
  max-height:230px;
  overflow-y:auto;
}
.activity-list::-webkit-scrollbar{ width:7px; }
.activity-list::-webkit-scrollbar-track{ background:#F4F6F8; border-radius:4px; }
.activity-list::-webkit-scrollbar-thumb{ background:#C7CDD6; border-radius:4px; }
.activity-list::-webkit-scrollbar-thumb:hover{ background:#AEB6C2; }
.activity-list li{ display:flex; gap:10px; padding:7px 0; }
.activity-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--planned);
  flex-shrink:0;
  margin-top:7px;
}
.activity-text{ display:block; font-size:12.5px; line-height:1.6; }
.activity-time{ display:block; font-size:11px; color:var(--ink-soft); margin-top:1px; }

@media (max-width:600px){
  .drawer-facts{ grid-template-columns:1fr; }
  .checklist-add{ flex-wrap:wrap; }
  .checklist-actions{ opacity:1; }
}

/* =====================================================================
   สถานะกำลังทำงาน (คู่กับ assets/js/pjm.js)
   ===================================================================== */
.pjm-spinner{
  display:inline-block;
  width:14px; height:14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:pjm-spin .6s linear infinite;
  vertical-align:-2px;
  margin-right:7px;
  opacity:.85;
}
.pjm-spinner-lg{ width:30px; height:30px; border-width:3px; margin:0 0 12px; }

@keyframes pjm-spin{ to{ transform:rotate(360deg); } }

.btn.is-loading{ cursor:progress; opacity:.85; }
.btn:disabled{ cursor:not-allowed; opacity:.65; }

.pjm-overlay{
  position:fixed;
  inset:0;
  background:rgba(28,36,48,.42);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.pjm-overlay.is-visible{ display:flex; }
.pjm-overlay-box{
  background:#fff;
  border-radius:12px;
  padding:28px 40px;
  text-align:center;
  color:var(--accent);
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
.pjm-overlay-text{
  font-family:'Prompt';
  font-size:14px;
  color:var(--ink);
}

/* =====================================================================
   SweetAlert2 — ปรับให้เข้าธีม (กล่องยืนยัน/แจ้งเตือนทั้งระบบใช้ตัวนี้)
   ปุ่มใช้คลาส .btn ของเราเอง จึงตั้ง buttonsStyling:false ไว้ที่ pjm.js
   ===================================================================== */
.pjm-swal{
  border-radius:var(--radius);
  font-family:'Noto Sans Thai',sans-serif;
  padding:22px 20px 18px;
}
.pjm-swal-title{
  font-family:'Prompt',sans-serif !important;
  font-weight:600 !important;
  font-size:17px !important;
  color:var(--ink) !important;
  line-height:1.5;
}
/* =====================================================================
   ไอคอน Lucide — เขียน <i data-lucide="ชื่อ"></i> แล้ว PJM.refreshIcons() แปลงเป็น <svg>
   จัดสไตล์ที่ selector ของ svg เพราะตอนแปลงเสร็จ <i> จะหายไป
   ===================================================================== */
.btn > svg, .link-btn > svg{
  width:15px; height:15px; flex:none;
  vertical-align:-2px; stroke-width:2;
}
/* ไอคอนในเมนูซ้าย · กระดิ่ง · ปุ่มย่อเมนู — ต้องกำหนดแยก เพราะไม่ได้อยู่ใน .btn */
.nav-icon > svg{ width:17px; height:17px; stroke-width:2; }
.notif-bell > svg, .sidebar-toggle > svg{ width:18px; height:18px; stroke-width:2; }
.foot-logout > svg{ width:16px; height:16px; stroke-width:2; }
.btn, .link-btn{ display:inline-flex; align-items:center; gap:6px; }
/* หัวข้อการ์ด — ไอคอนช่วยแยกหัวข้อออกจากเนื้อหาได้ตั้งแต่กวาดสายตา ไม่ต้องอ่านทุกบรรทัด */
.card-title > svg{
  width:17px; height:17px; flex:none; stroke-width:2;
  color:var(--accent); margin-right:8px; vertical-align:-3px;
}
.btn-sm > svg, .link-btn > svg{ width:14px; height:14px; }
/* ปุ่มตอนกำลังโหลดถูกแทนที่ด้วยสปินเนอร์ ไอคอนเดิมหายไปชั่วคราว — ไม่ต้องทำอะไร */

.pjm-swal-text{
  font-size:13.5px !important;
  color:var(--ink-soft) !important;
  line-height:1.8 !important;
  text-align:left;
}
.pjm-swal .swal2-actions{ gap:8px; margin-top:18px; }
.pjm-swal .swal2-actions .btn{ margin:0; }
.pjm-swal-toast{
  font-family:'Noto Sans Thai',sans-serif;
  border-radius:var(--radius);
}
.pjm-swal-toast .swal2-title{ font-size:13.5px !important; font-weight:500; }

/* =====================================================================
   ลำดับก่อน-หลัง (dependency)
   ตั้งชื่อขึ้นต้น pjm-dep- ให้เจาะจง กันชนกับ .dept-* ของหน้าจัดการแผนก
   ===================================================================== */
.pjm-dep-alert{
  background:#FDF4E3;
  border:1px solid #F5DFB0;
  border-left:3px solid var(--amber);
  border-radius:var(--radius);
  padding:11px 14px;
  margin-bottom:12px;
}
.pjm-dep-alert-title{
  font-family:'Prompt';
  font-weight:600;
  font-size:13px;
  color:#8A6212;
  margin-bottom:6px;
}
.pjm-dep-alert-list{
  margin:0;
  padding-left:18px;
  font-size:12.5px;
  line-height:1.9;
}
.pjm-dep-alert-foot{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.pjm-dep-group{ margin-bottom:12px; }
.pjm-dep-group:last-child{ margin-bottom:0; }
.pjm-dep-heading{
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.pjm-dep-list{ list-style:none; margin:0; padding:0; }
.pjm-dep-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.pjm-dep-item:last-child{ border-bottom:none; }
.pjm-dep-body{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pjm-dep-meta{ font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
.pjm-dep-actions{ white-space:nowrap; }
.pjm-dep-item.is-conflict .pjm-dep-meta{ color:var(--overdue); }

.pjm-dep-add{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}
.pjm-dep-add select{ max-width:190px; }

/* แถวรายการที่ต้องทำบน Gantt — จองแถวไว้ให้ตรงบรรทัดกับตารางซ้าย แต่ไม่มีแท่งให้เห็น */
.gantt .bar-wrapper.pjm-checkrow{ pointer-events:none; }
.gantt .bar-wrapper.pjm-checkrow .bar,
.gantt .bar-wrapper.pjm-checkrow .bar-progress,
.gantt .bar-wrapper.pjm-checkrow .bar-label,
.gantt .bar-wrapper.pjm-checkrow .handle{ display:none; }

.gantt-name-row.is-check{ background:#FCFCFD; }
.gantt-name-row.is-check .gcol-name{ gap:6px; }
.gantt-check-text{
  font-size:12px;
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gantt-name-row.is-check.is-done .gantt-check-text{ text-decoration:line-through; color:#A7AEB9; }
.gantt-name-row.is-check input[type=checkbox]{ width:14px; height:14px; flex-shrink:0; cursor:pointer; }

/* ลูกศรบน Gantt — วาดเองใน gantt.php ไม่ใช่ของ Frappe */
.pjm-dep-arrow{
  fill:none;
  stroke:var(--ink-soft);
  stroke-width:1.3;
  opacity:.75;
}
.pjm-dep-arrow.is-conflict{ stroke:var(--overdue); stroke-width:1.8; opacity:1; }
.pjm-dep-head{ fill:var(--ink-soft); }
.pjm-dep-head.is-conflict{ fill:var(--overdue); }

.text-mono{ font-family:'IBM Plex Mono',monospace; }
.text-soft{ color:var(--ink-soft); }
.text-right{ text-align:right; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }

@media (max-width:768px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .content{ padding:16px; }
  .topbar{ padding:14px 16px; }
}

/* =====================================================================
   ปฏิทินงาน (FullCalendar) — ปรับให้เข้าโทน wireframe
   ตั้ง prefix `cal-` ทุกคลาสที่เราสร้างเอง ห้ามใช้คำกลางๆ ที่ชนกับส่วนอื่น (กฎข้อ 20)
   ===================================================================== */
.cal-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.cal-nav{ display:flex; align-items:center; gap:12px; }
.cal-title{
  font-family:'Prompt'; font-weight:600; font-size:15px; color:var(--ink);
  white-space:nowrap;
}
.cal-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cal-tools .form-control{ width:auto; max-width:260px; padding:8px 11px; font-size:13px; }
.cal-check{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink-soft); white-space:nowrap; cursor:pointer;
}

.cal-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 0 14px; font-size:12px; color:var(--ink-soft);
  border-bottom:1px solid var(--line); margin-bottom:14px;
}
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.cal-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }
/* milestone เป็นสี่เหลี่ยมหมุน ให้ตรงกับหมุดบน Gantt */
.cal-dot.is-milestone{ background:var(--amber); border-radius:2px; transform:rotate(45deg); }

/* --- ตัวปฏิทินเอง ---
   ⚠️ FullCalendar ใส่คลาส `.fc` ลงบน element เดียวกับที่เราส่งให้ ไม่ได้สร้างลูกใหม่
   เขียน `#pjm-calendar .fc ...` จะไม่ match อะไรเลย และ **ไม่มี error ใดๆ**
   (เคยพลาดมาแล้ว — สีงานกลายเป็นสีน้ำเงินค่าตั้งต้นของ library ทั้งกระดาน) */
#pjm-calendar{
  font-size:13px;
  --fc-border-color:var(--line);
  --fc-today-bg-color:#FFF8E7;
  --fc-page-bg-color:var(--surface);
}
#pjm-calendar .fc-col-header-cell{
  background:#FAFBFC; padding:7px 0;
  font-family:'Prompt'; font-size:11.5px; font-weight:500; color:var(--ink-soft);
}
#pjm-calendar .fc-daygrid-day-number{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft); padding:5px 7px;
}
#pjm-calendar .fc-day-today .fc-daygrid-day-number{ color:var(--overdue); font-weight:600; }
#pjm-calendar .fc-day-sat .fc-daygrid-day-frame,
#pjm-calendar .fc-day-sun .fc-daygrid-day-frame{ background:#FBFCFD; }
#pjm-calendar .fc-daygrid-more-link{ font-size:11.5px; color:var(--accent); }

/* แถบงาน — สีบอกสถานะชุดเดียวกับทั้งระบบ */
#pjm-calendar .cal-ev{
  border:none; border-radius:4px; padding:0;
  background:var(--planned); margin:1px 3px;
}
#pjm-calendar .cal-ev.is-in_progress{ background:var(--progress); }
#pjm-calendar .cal-ev.is-done{ background:var(--done); }
#pjm-calendar .cal-ev.is-overdue{ background:var(--overdue); }
#pjm-calendar .cal-ev.is-blocked{ background:var(--overdue); }
#pjm-calendar .cal-ev.is-milestone{ background:var(--amber); }
#pjm-calendar .cal-ev.is-risk{ box-shadow:inset 0 0 0 1.5px #8A6212; }

.cal-ev-in{
  display:flex; align-items:center; gap:5px; min-width:0;
  padding:2px 6px; color:#fff; font-size:11.5px; line-height:1.5;
}
.cal-ev.is-not_started .cal-ev-in{ color:var(--ink); }   /* พื้นเทาอ่อน ตัวขาวอ่านไม่ออก */
.cal-ev-code{ font-family:'IBM Plex Mono'; font-size:10.5px; opacity:.85; flex:none; }
.cal-ev-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:700px){
  .cal-bar{ flex-direction:column; align-items:stretch; }
  .cal-tools .form-control{ max-width:none; width:100%; }
  /* จอแคบ แท่งเหลือ ~80px — เก็บเฉพาะสิ่งที่สำคัญที่สุด: ชื่อโครงการ · % · จำนวนงานเลยกำหนด
     ตัดรหัสโครงการกับจำนวนงานทิ้งก่อน (ดูได้ในกล่องที่กดเปิด) */
  .cal-ev-code{ display:none; }
  .cal-ev-kids{ display:none; }
  /* ตัวเลข % ตัดทิ้งด้วย — หลอดสียังบอกความคืบหน้าได้โดยไม่กินที่ของชื่อโครงการ
     (เลขที่แน่นอนดูได้ในกล่องที่กดเปิด) */
  .cal-ev-pct{ display:none; }
}

/* คำอธิบายสีแบบ "ตามโครงการ" — ใช้เมื่อดูทุกโครงการพร้อมกัน */
.cal-legend-label{ font-weight:500; color:var(--ink); }
.cal-legend-items{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cal-legend-items > span{ display:flex; align-items:center; gap:6px; }
.cal-legend-note{ color:var(--ink-soft); }

/* จำนวนงานย่อยที่ถูกซ่อนอยู่ใต้งานแม่ */
.cal-ev-kids{
  flex:none; font-family:'IBM Plex Mono'; font-size:10px;
  padding:0 4px; border-radius:3px;
  background:rgba(255,255,255,.28);
}
.cal-ev.is-not_started .cal-ev-kids{ background:rgba(28,36,48,.12); }

/* โหมดสีตามโครงการ: สีถูกใช้บอก "ของใคร" แล้ว สถานะจึงต้องบอกด้วยรูปแบบอื่น
   เคยใช้ขอบแดง 2px รอบแท่ง — รกเกินไปบนแท่งบางๆ เปลี่ยนเป็นป้ายจำนวนงานที่เลยกำหนดแทน
   (บอกได้มากกว่าด้วย: รู้ว่ากี่งาน ไม่ใช่แค่ "มี") */
#pjm-calendar .cal-ev.is-pmode .cal-ev-in{ color:#fff; }
#pjm-calendar .cal-ev.is-pmode.is-done{ opacity:.55; }
#pjm-calendar .cal-ev.is-pmode.is-done .cal-ev-name{ text-decoration:line-through; }

/* กล่องรายละเอียดงานบนปฏิทิน (อ่านอย่างเดียว) — ใช้คลาส drawer-facts/risk-banner ร่วมกับ drawer */
.cal-modal-body{ padding:18px 20px; max-height:64vh; overflow-y:auto; }
.cal-modal-line{ display:flex; align-items:baseline; gap:10px; margin-top:14px; font-size:13.5px; }
.cal-modal-counts{
  display:flex; flex-wrap:wrap; gap:16px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft);
}
.cal-modal-counts span{ display:flex; align-items:center; gap:6px; }
.cal-modal-counts svg{ width:14px; height:14px; }
.cal-modal-desc{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cal-modal-desc .rich-text{ margin-top:6px; }

/* ภาพรวมงานย่อยในกล่องรายละเอียดบนปฏิทิน */
.cal-modal-subs{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cal-sub-list{ margin-top:8px; }
.cal-sub-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px 66px 44px;
  align-items:center; column-gap:10px;
  padding:7px 0; border-bottom:1px solid #F1F3F5; font-size:12.5px;
}
.cal-sub-row:last-child{ border-bottom:none; }
.cal-sub-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cal-sub-owner{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--ink-soft); }
.cal-sub-owner-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-sub-date{ text-align:right; color:var(--ink-soft); font-size:11.5px; }
.cal-sub-date.is-overdue{ color:var(--overdue); }
.cal-sub-prog{ text-align:right; color:var(--ink-soft); font-size:11.5px; }

@media (max-width:600px){
  .cal-sub-row{ grid-template-columns:minmax(0,1fr) 30px 44px; }
  .cal-sub-owner-name, .cal-sub-date{ display:none; }
}

/* เลขข้อ (WBS) ในรายการงานของกล่องภาพรวมโครงการ */
.cal-sub-no{ display:inline-block; min-width:26px; font-size:10.5px; color:var(--ink-soft); }
/* ช่องกรองที่ใช้ไม่ได้ในมุมมองปัจจุบัน — ต้องดูออกว่าปิดอยู่ ไม่ใช่กดแล้วเงียบ */
.cal-check.is-disabled{ opacity:.45; cursor:not-allowed; }

/* กล่อง modal แบบกว้าง — ใช้กับกล่องอ่านข้อมูลที่มีตารางอยู่ข้างใน (ตั้งผ่าน PJM.openModal(..,{wide:true})) */
.pjm-modal-box.is-wide{ max-width:960px; }
.pjm-modal-box.is-wide .cal-modal-body{ max-height:70vh; }

/* ป้ายจำนวนงานที่เลยกำหนดบนแท่งโครงการ — แทนขอบแดงเดิมที่รกเกินไป */
.cal-ev-over{
  flex:none; font-family:'IBM Plex Mono'; font-size:10px;
  padding:0 4px; border-radius:3px;
  background:var(--overdue); color:#fff;
}

/* ปุ่มยุบ-กางงานย่อยในกล่องภาพรวมโครงการ */
.cal-sub-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:none; margin-right:4px;
  padding:0; border:1px solid var(--line); border-radius:3px;
  background:var(--surface); color:var(--ink-soft);
  font-family:'IBM Plex Mono'; font-size:11px; line-height:1; cursor:pointer;
  vertical-align:-3px;
}
.cal-sub-toggle:hover{ border-color:var(--accent); color:var(--accent); }
/* แถวที่ไม่มีงานย่อย: จองที่ไว้เท่ากันเพื่อให้ชื่องานเรียงตรงกันทั้งคอลัมน์ */
.cal-sub-toggle.is-empty{ border-color:transparent; background:none; cursor:default; }

.cal-subs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cal-subs-tools{ display:flex; gap:12px; }

/* หลอดความคืบหน้าในตัวแท่งโครงการ (มุมมองทุกโครงการ)
   ส่วนที่ "ยังไม่เสร็จ" ถูกทาจางทับจากขวา — พื้นแท่งยังเป็นสีประจำโครงการเหมือนเดิม
   ⚠️ FullCalendar ตัดแท่งที่คร่อมสัปดาห์เป็นหลายท่อน แต่ละท่อนจึงแสดง % เดียวกัน (เป็น % ของทั้งโครงการ) */
.cal-ev-in.has-progress{ position:relative; overflow:hidden; }
.cal-ev-rest{
  position:absolute; top:0; right:0; bottom:0;
  background:rgba(255,255,255,.62);
  pointer-events:none;
}
/* เนื้อหาต้องอยู่เหนือชั้นที่ทาจาง ไม่งั้นตัวหนังสือจะซีดตาม */
.cal-ev-in.has-progress > span:not(.cal-ev-rest){ position:relative; z-index:1; }
.cal-ev-pct{
  flex:none; margin-left:auto;
  font-family:'IBM Plex Mono'; font-size:10px; font-weight:500;
}
/* ตัวหนังสือบนส่วนที่ถูกทาจางต้องยังอ่านออก จึงใช้สีเข้มแทนขาว */
#pjm-calendar .cal-ev.is-pmode .cal-ev-in.has-progress{ color:var(--ink); }

/* =====================================================================
   คู่มือการใช้งาน (/help) — หน้าเดี่ยว ไม่มีเมนูซ้าย เปิดเป็นแท็บใหม่
   prefix `hlp-` ทุกคลาสตามกฎข้อ 20 (ห้ามชนกับคลาสของหน้างานจริง)
   ===================================================================== */
.hlp{ min-height:100vh; background:var(--canvas); }

.hlp-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:18px;
  padding:12px 22px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.hlp-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.hlp-brand:hover{ text-decoration:none; }
.hlp-brand .brand-name{ display:block; font-family:'Prompt'; font-weight:600; font-size:15px; color:var(--ink); }
.hlp-brand .brand-sub{ display:block; font-size:11.5px; color:var(--ink-soft); }

.hlp-search{ position:relative; flex:1; max-width:560px; }
.hlp-search input{
  width:100%; padding:9px 34px 9px 36px;
  border:1px solid var(--line); border-radius:8px;
  font-family:'Noto Sans Thai'; font-size:13.5px; color:var(--ink);
  background:#FAFBFC;
}
.hlp-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff; }
.hlp-search > svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-soft); pointer-events:none;
}
.hlp-search button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer;
  font-size:19px; line-height:1; color:var(--ink-soft);
}
.hlp-hits{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }

.hlp-body{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:26px; padding:22px; align-items:start; }

.hlp-toc{
  position:sticky; top:78px;
  display:flex; flex-direction:column; gap:1px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px;
  max-height:calc(100vh - 100px); overflow-y:auto;
}
.hlp-toc-label{
  font-family:'Prompt'; font-size:10.5px; letter-spacing:.6px;
  color:var(--ink-soft); padding:4px 8px 8px;
}
.hlp-toc a{
  padding:7px 10px; border-radius:6px;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
}
.hlp-toc a:hover{ background:#F3F6F7; color:var(--ink); text-decoration:none; }
.hlp-toc a.is-active{ background:var(--accent-soft); color:var(--accent-dark); font-weight:500; }

.hlp-main{ min-width:0; display:flex; flex-direction:column; gap:18px; }

.hlp-sec{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; scroll-margin-top:78px;
}
.hlp-sec h2{
  display:flex; align-items:center; gap:9px;
  font-family:'Prompt'; font-weight:600; font-size:18px; color:var(--ink);
  margin:0 0 12px;
}
.hlp-sec h2 > svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.hlp-sec h3{
  font-family:'Prompt'; font-weight:600; font-size:14.5px; color:var(--ink);
  margin:22px 0 8px;
}
.hlp-sec p{ font-size:13.5px; line-height:1.85; color:var(--ink); margin:0 0 10px; }
.hlp-sec code{
  font-family:'IBM Plex Mono'; font-size:12px;
  background:#F1F4F6; padding:1px 5px; border-radius:4px;
}
.hlp-sec ol, .hlp-list{ margin:0 0 10px; padding-left:20px; font-size:13.5px; line-height:1.9; }
.hlp-sec ol li, .hlp-list li{ margin-bottom:3px; }

.hlp-table{ width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 12px; }
.hlp-table th{
  text-align:left; padding:8px 10px; background:#FAFBFC;
  border-bottom:1.5px solid var(--line);
  font-family:'Prompt'; font-weight:500; font-size:12px; color:var(--ink-soft);
}
.hlp-table td{ padding:9px 10px; border-bottom:1px solid #F1F3F5; vertical-align:top; line-height:1.75; }
.hlp-table tr:last-child td{ border-bottom:none; }

.hlp-note{
  border-left:3px solid var(--accent); background:#F3FAFA;
  padding:11px 14px; border-radius:0 7px 7px 0;
  font-size:13px; line-height:1.85; margin:12px 0;
}
.hlp-note.hlp-warn{ border-left-color:var(--amber); background:#FDF7EA; }
.hlp-tip{
  display:flex; align-items:flex-start; gap:8px;
  background:#F7F9FA; border-radius:7px; padding:10px 13px;
  font-size:13px !important; line-height:1.8 !important; color:var(--ink-soft) !important;
}
.hlp-tip > svg{ width:16px; height:16px; color:var(--amber); flex:none; margin-top:3px; }

.hlp-fig{ margin:14px 0 16px; }
.hlp-fig svg{ width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.hlp-fig figcaption{ font-size:12px; color:var(--ink-soft); line-height:1.8; margin-top:8px; }
.hlp-svg-t{ font-family:'Prompt'; font-size:13px; fill:#1C2430; }
.hlp-svg-s{ font-family:'Noto Sans Thai'; font-size:11px; fill:#1C2430; }
.hlp-svg-xs{ font-family:'Noto Sans Thai'; font-size:9.5px; fill:#5B6472; }
.hlp-svg-big{ font-family:'Prompt'; font-size:19px; font-weight:600; }
.hlp-svg-num{ font-family:'IBM Plex Mono'; font-size:10px; fill:#fff; text-anchor:middle; }

.hlp-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
.hlp-chip{
  display:inline-block; padding:1px 7px; border-radius:20px;
  background:#EEF0F3; color:var(--ink-soft); font-size:11.5px; white-space:nowrap;
}
.hlp-chip-red{ background:#FBE9E7; color:#A93B33; }
.hlp-chip-green{ background:#E4F4F0; color:#1F6E60; }

.hlp-faq{ border-top:1px solid #F1F3F5; padding:12px 0 2px; }
.hlp-faq:first-of-type{ border-top:none; }
.hlp-faq > b{ font-family:'Prompt'; font-size:13.5px; color:var(--ink); }
.hlp-faq > p{ margin:5px 0 0; color:var(--ink-soft); }

.hlp-empty{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.hlp-empty > svg{ width:34px; height:34px; margin-bottom:10px; }
.hlp-empty small{ display:block; margin-top:6px; font-size:12px; }

.hlp-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 4px 30px; font-size:12.5px;
}

/* ปุ่มคู่มือในเมนูซ้าย — ไอคอนลิงก์ออกบอกว่าจะเปิดแท็บใหม่ */
.nav-item-help{ margin-top:auto; }
/* ⚠️ .sidebar-foot มี margin-top:auto อยู่แล้ว — ถ้าปล่อยไว้ทั้งคู่ พื้นที่ว่างจะถูกหารครึ่ง
   แล้วคู่มือจะลอยห่างจากแถบชื่อผู้ใช้ (เคยห่าง 247px) ต้องยกเลิกของตัวหลังเมื่ออยู่ติดกัน */
.nav-item-help + .sidebar-foot{ margin-top:0; }
.nav-ext{ margin-left:auto; opacity:.5; display:flex; }
.nav-ext > svg{ width:13px; height:13px; }
.app.sidebar-collapsed .nav-ext{ display:none; }

@media (max-width:900px){
  .hlp-body{ grid-template-columns:minmax(0,1fr); }
  .hlp-toc{ position:static; max-height:none; }
  .hlp-top{ flex-wrap:wrap; gap:10px; }
  .hlp-search{ max-width:none; order:3; flex-basis:100%; }
}

/* หัวการ์ดที่มีปุ่มอยู่ทางขวา (เช่น รายชื่อผู้ใช้งาน + ปุ่มซิงก์ Lark) */
.card-head-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}

/* ประวัติการส่ง Lark — ข้อความยาวต้องไม่ดันตารางจนอ่านไม่ออก */
.log-body{
  font-size:11.5px; line-height:1.6; margin-top:3px;
  max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.log-pager{ display:flex; align-items:center; gap:12px; margin-top:14px; font-size:12.5px; }

/* ช่องกรอกที่มีปุ่มติดด้านขวา (เช่น Lark User ID + ปุ่มทดสอบส่ง) */
.input-group{ display:flex; gap:8px; align-items:stretch; }
.input-group .form-control{ flex:1; min-width:0; }
.input-group .btn{ flex:none; white-space:nowrap; }

.lark-test-result{
  margin-top:8px; padding:8px 11px; border-radius:7px;
  font-size:12.5px; line-height:1.7;
  background:#F7F9FA; color:var(--ink-soft);
}
.lark-test-result.is-ok{ background:#E4F4F0; color:#1F6E60; }
.lark-test-result.is-fail{ background:#FBE9E7; color:#A93B33; }