/* ════════════════════════════════════════════════════════════════════
   T-Go v2.0 — T-Costsheet: Modern toolbar card + collapsible sub-status
   ────────────────────────────────────────────────────────────────────
   ปัญหาเดิม: หัวข้อ/ค้นหา/แท็บกรอง .fb (ชิปเต็มแถว สีเขียวทึบ) + แถบ Pre-CS
   (js/358) + แถบต้นทุนจริง (js/359) กางเต็มจอค้างตลอดเวลา ทำให้หน้าดูรก/
   ยึกยักเวลากรอง — และหน้าตาเหมือนฟอร์มเก่าไม่มีการจัดกลุ่มชัดเจน
   แก้ไข (CSS + DOM wrapper เล็กน้อยใน pgCS, ไม่แตะ logic การกรอง/นับเดิม):
   1) รวมหัวข้อ + ค้นหา + แท็บสถานะ ไว้ใน "การ์ดเครื่องมือ" ใบเดียว
      (.cs-toolbar-card) โค้งมน มีเงา แยกจากพื้นหลังชัดเจน
   2) แท็บสถานะ .fb → underline บาง เรียงแถวเดียว แทนปุ่มชิปทึบ
      (สโคปเฉพาะ .fb.cs-status-fb ของหน้า Cost Sheet — ไม่โดน .fb ของ
       "เมนูสินค้า"/Unit Price ที่ใช้คลาสเดียวกันแต่คนละหน้า)
   3) ซ่อน #precs-listbar / #actualcost-bar ไว้ในแผงพับเก็บได้ (ปุ่ม toggle
      อยู่ใน js/414-costsheet-substatus-toggle-V1.js)
   4) ตาราง/การ์ดผลลัพธ์ → โค้งมน เงาบาง เส้นขอบเบาลง
   ════════════════════════════════════════════════════════════════════ */

/* ── 0) การ์ดเครื่องมือ: ห่อหัวข้อ + ค้นหา + แท็บสถานะ ไว้ด้วยกัน ── */
#costsheetPage main .cs-toolbar-card{
  background: var(--sf, #fff) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 16px !important;
  padding: 18px 20px 6px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04) !important;
}

/* ── 1) หัวข้อ: ชื่อหน้า + ค้นหา + view toggle + สร้างใหม่ อยู่แถวเดียวกัน ── */
#costsheetPage main .cs-toolbar-card .ph.cs-list-header{
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}
#costsheetPage main .ph.cs-list-header .pt{
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
#costsheetPage main .ph.cs-list-header .ps{
  font-size: 12.5px !important;
}
#costsheetPage main .ph.cs-list-header .cs-header-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
#costsheetPage main .ph.cs-list-header .cs-header-search{
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
}
#costsheetPage main .ph.cs-list-header .cs-header-search .tgo-search-input{
  border-radius: 999px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  background: var(--bg, #F7F6F2) !important;
  border-color: transparent !important;
}
#costsheetPage main .ph.cs-list-header .cs-header-search .tgo-search-input:focus{
  background: var(--sf, #fff) !important;
  border-color: #93c5fd !important;
}
#costsheetPage main .ph.cs-list-header .view-toggle{
  border-radius: 999px !important;
  overflow: hidden;
}
#costsheetPage main .ph.cs-list-header .btn-g{
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
  height: 36px !important;
}
#costsheetPage main .cs-toolbar-card #cs-search-hint.tgo-search-hint{
  display: block;
  margin: -8px 0 10px;
}

/* ── 2) แท็บสถานะ: underline บาง แทนปุ่มชิปทึบ ── */
#costsheetPage main .cs-toolbar-card .fb.cs-status-fb{
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  border-top: 1px solid var(--bd, #e5e7eb) !important;
  padding-top: 2px !important;
  margin: 0 -20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  scrollbar-width: thin;
}

#costsheetPage main .fb.cs-status-fb .btn{
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--mu, #6b7280) !important;
  flex-shrink: 0;
}

#costsheetPage main .fb.cs-status-fb .btn:hover{
  color: var(--tx, #1A1916) !important;
  background: rgba(0,0,0,.03) !important;
}

#costsheetPage main .fb.cs-status-fb .btn.on,
#costsheetPage main .fb.cs-status-fb .btn.on:hover{
  background: transparent !important;
  color: #16a34a !important;
  border-bottom-color: #16a34a !important;
  font-weight: 800 !important;
}

#costsheetPage main .fb.cs-status-fb .btn.cs-chip-todo{
  border-left: none !important;
  border-bottom: 3px solid transparent !important;
}
#costsheetPage main .fb.cs-status-fb .btn.cs-chip-todo.on{
  background: transparent !important;
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  box-shadow: none !important;
}

#costsheetPage main .fb.cs-status-fb .btn.on .cs-chip-n,
#costsheetPage main .fb.cs-status-fb .btn.cs-chip-todo.on .cs-chip-n{
  background: rgba(22,163,74,.12) !important;
  color: #16a34a !important;
}
#costsheetPage main .fb.cs-status-fb .btn.cs-chip-todo.on .cs-chip-n{
  background: rgba(37,99,235,.12) !important;
  color: #2563eb !important;
}

/* ถังขยะ = คนละหมวดกับสถานะงาน กั้นด้วยเส้นคั่นแล้ว ให้สีเรียบ/มัวกว่า */
#costsheetPage main .fb.cs-status-fb .cs-trash-btn-v1867{
  margin-left: auto !important;
  color: var(--mu, #9ca3af) !important;
}
#costsheetPage main .fb.cs-status-fb .cs-trash-btn-v1867.on{
  color: #b91c1c !important;
  border-bottom-color: #b91c1c !important;
}

/* ── 3) แผงตัวกรองสถานะย่อย (Pre-CS / ต้นทุนจริง) — พับเก็บได้ ── */
#costsheetPage main .cs-toolbar-card .cs-substatus-toggle-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.cs-substatus-toggle-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1A5276;
  background: #EBF5FB;
  border: 1px solid #BFE0F5;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cs-substatus-toggle-btn:hover{
  background: #DCEEFA;
  border-color: #9BCBEC;
}

.cs-substatus-toggle-btn .cs-sst-chev{
  display: inline-block;
  font-size: 11px;
  color: inherit;
  transition: transform .15s ease;
}

.cs-substatus-hint{
  font-size: 12px;
  color: var(--mu, #9ca3af);
}
@media (max-width: 640px){
  .cs-substatus-hint{ display: none; }
}

/* พับเก็บ #precs-listbar / #actualcost-bar (สร้างโดย js/358, js/359) */
#cs-body-area.cs-substatus-collapsed #precs-listbar,
#cs-body-area.cs-substatus-collapsed #actualcost-bar{
  display: none !important;
}

/* ── 4) แถบ "รอ CEO อนุมัติ" — ลดความหนา ให้เป็นแบนเนอร์บางลง ── */
#costsheetPage .ceo-pending-bar{
  border-radius: 14px !important;
  padding: 10px 14px !important;
}
#costsheetPage .ceo-pending-header{
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
}

/* ── 5) ตารางรายการ CS — ห่อเป็นการ์ดโค้งมน เงาบาง แถวอ่านง่ายขึ้น ── */
#cs-body-area .twrap{
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
#cs-body-area .cs-list-table thead th{
  background: var(--bg, #F7F6F2) !important;
  color: var(--mu, #6b7280) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: none;
  border-bottom: 1px solid var(--bd, #e5e7eb) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#cs-body-area .cs-list-table tbody tr{
  transition: background .1s;
}
#cs-body-area .cs-list-table tbody tr:hover{
  background: #F7FAFC !important;
}
#cs-body-area .cs-list-table tbody tr td{
  border-bottom: 1px solid var(--bd, #f1f0ec) !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* ── 6) การ์ดมุมมอง Grid — โค้งมน เงาบาง ── */
#cs-body-area .cg .card{
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
  transition: box-shadow .12s, transform .12s;
}
#cs-body-area .cg .card:hover{
  box-shadow: 0 4px 14px rgba(15,23,42,.09) !important;
  transform: translateY(-1px);
}