/* ════════════════════════════════════════════════════════════════════
   T-Costsheet — List Page Modern Refresh v2
   ────────────────────────────────────────────────────────────────────
   หมายเหตุ: css/28-costsheet-modern-filters-v1.css ตั้งใจทำแบบนี้อยู่แล้ว
   แต่ selector ใช้ "main" (element type) เช่น "#costsheetPage main .fb"
   ซึ่งไม่ match อะไรเลย เพราะ container จริงคือ <div id="main" class="main">
   (ไม่ใช่ <main> tag) — กติกา CSS จึง "ตาย" เงียบ ๆ ทั้งชุด ผลคือปุ่มสถานะ
   ยังโดน override ด้วย css/24 (.fb .btn.on{background:#16a34a}) เป็นบล็อกทึบ
   แบบเดิม ไฟล์นี้แก้ด้วย selector ที่ตรงกับ DOM จริง (#main แทน main) +
   ทำให้ toolbar/แท็บสถานะ/ตาราง/การ์ด/แถบ Pre-CS ฯลฯ เป็นชุดดีไซน์เดียวกัน
   ไม่แตะ logic/data — visual only
   ════════════════════════════════════════════════════════════════════ */

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

#costsheetPage #main .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: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--tx, #1A1916) !important;
}
#costsheetPage #main .ph.cs-list-header .ps{
  font-size: 12.5px !important;
  color: var(--mu, #7A776F) !important;
  margin-top: 2px !important;
}
#costsheetPage #main .ph.cs-list-header .cs-header-actions{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}
#costsheetPage #main .ph.cs-list-header .cs-header-search{
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 360px;
}
#costsheetPage #main .tgo-search-wrap.cs-header-search .tgo-search-input{
  border-radius: 999px !important;
  padding: 9px 14px 9px 34px !important;
  background: var(--bg, #F7F6F2) !important;
  border: 1px solid transparent !important;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#costsheetPage #main .tgo-search-wrap.cs-header-search .tgo-search-input:focus{
  background: #fff !important;
  border-color: var(--costsheet, #14B8A6) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,.14) !important;
  outline: none !important;
}
#costsheetPage #main .cs-toolbar-card #cs-search-hint.tgo-search-hint{
  display: block;
  margin: -8px 0 10px;
  font-size: 12px;
  color: var(--mu, #7A776F);
}
#costsheetPage #main .ph.cs-list-header .view-toggle{
  border-radius: 999px !important;
  overflow: hidden;
  border: 1px solid var(--bd, #E8E4DC) !important;
}
#costsheetPage #main .ph.cs-list-header .btn-g{
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0 20px !important;
  height: 38px !important;
  background: var(--costsheet, #14B8A6) !important;
  border-color: var(--costsheet, #14B8A6) !important;
  box-shadow: 0 4px 12px -2px rgba(20,184,166,.4) !important;
  transition: filter .12s, transform .12s;
}
#costsheetPage #main .ph.cs-list-header .btn-g:hover{
  filter: brightness(.94);
  transform: translateY(-1px);
}

/* ─── 2) แท็บสถานะ: pill สีนุ่ม แทนบล็อกทึบ ─── */
#costsheetPage #main .fb.cs-status-fb{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  border-top: 1px solid var(--bd, #E8E4DC) !important;
  margin: 0 -22px 0 !important;
  padding: 14px 22px !important;
  scrollbar-width: thin;
}
#costsheetPage #main .fb.cs-status-fb .btn{
  background: var(--bg, #F7F6F2) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mu, #7A776F) !important;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
#costsheetPage #main .fb.cs-status-fb .btn:hover{
  background: #EFEDE7 !important;
  color: var(--tx, #1A1916) !important;
}
#costsheetPage #main .fb.cs-status-fb .btn .cs-chip-n{
  background: rgba(0,0,0,.07) !important;
  color: inherit !important;
}

/* สถานะ "ทั้งหมด" — เขียวอมฟ้า (โทน brand costsheet) */
#costsheetPage #main .fb.cs-status-fb .btn.on{
  background: #E4F5F2 !important;
  color: #0F766E !important;
  border-color: #BCE6DD !important;
  font-weight: 700 !important;
}
/* ร่าง — เหลือง/อำพัน */
#costsheetPage #main .fb.cs-status-fb .btn[onclick*="csGoStatus('draft')"].on{
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}
/* รออนุมัติ — ฟ้า */
#costsheetPage #main .fb.cs-status-fb .btn[onclick*="csGoStatus('pending')"].on{
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
  border-color: #BFDBFE !important;
}
/* อนุมัติแล้ว — เขียว */
#costsheetPage #main .fb.cs-status-fb .btn[onclick*="csGoStatus('approved')"].on{
  background: #DCFCE7 !important;
  color: #166534 !important;
  border-color: #BBF7D0 !important;
}
/* ปฏิเสธ — แดง */
#costsheetPage #main .fb.cs-status-fb .btn[onclick*="csGoStatus('rejected')"].on{
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}
/* รอทำ — คราม (แทนที่สไตล์เดิมจาก inline <style> v791) */
#costsheetPage #main .fb.cs-status-fb .btn.cs-chip-todo{
  border-left: none !important;
  background: var(--bg, #F7F6F2) !important;
  color: var(--mu, #7A776F) !important;
}
#costsheetPage #main .fb.cs-status-fb .btn.cs-chip-todo.on{
  background: #E0E7FF !important;
  color: #3730A3 !important;
  border-color: #C7D2FE !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(0,0,0,.08) !important;
  color: inherit !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{
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}

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

/* ─── 4) พื้นที่เนื้อหา: ระยะห่างสม่ำเสมอระหว่างการ์ด/แถบต่าง ๆ ─── */
#costsheetPage #main #cs-body-area{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#costsheetPage #main #cs-body-area > *{
  margin: 0 !important;
}

/* ─── 5) ตารางรายการ CS — การ์ดโค้งมน เงาบาง แถวอ่านง่าย ─── */
#costsheetPage #main #cs-body-area .twrap{
  border: 1px solid var(--bd, #E8E4DC) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  background: var(--sf, #fff) !important;
}
#costsheetPage #main #cs-body-area .cs-list-table thead th{
  background: #FAF9F6 !important;
  color: var(--mu, #7A776F) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em;
  text-transform: none;
  border-bottom: 1px solid var(--bd, #E8E4DC) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#costsheetPage #main #cs-body-area .cs-list-table tbody tr{
  transition: background .12s;
}
#costsheetPage #main #cs-body-area .cs-list-table tbody tr:hover{
  background: #FAFAF8 !important;
}
#costsheetPage #main #cs-body-area .cs-list-table tbody td{
  border-bottom: 1px solid #F1F0EC !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  font-size: 13px !important;
}
#costsheetPage #main #cs-body-area .cs-list-table tbody tr:last-child td{
  border-bottom: none !important;
}
#costsheetPage #main #cs-body-area .badge{
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ─── 6) มุมมอง Grid — การ์ดโค้งมน ยกตัวตอน hover ─── */
#costsheetPage #main #cs-body-area .cg{
  gap: 14px !important;
}
#costsheetPage #main #cs-body-area .cg .card{
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
#costsheetPage #main #cs-body-area .cg .card:hover{
  box-shadow: 0 14px 30px -14px rgba(15,23,42,.22) !important;
  transform: translateY(-2px);
  border-color: var(--bds, #C8C4BB) !important;
}

/* ─── 7) แถบ "รอ CEO อนุมัติ" / Pre-CS / ต้นทุนจริง — เงา/มุมโค้งให้เข้าชุดเดียวกัน ─── */
#costsheetPage #main #cs-body-area .ceo-pending-bar{
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -14px rgba(180,120,10,.35) !important;
}
#costsheetPage #main #cs-body-area #precs-listbar .pl-chip,
#costsheetPage #main #cs-body-area #actualcost-bar .ac-chip{
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  transition: box-shadow .12s, transform .12s;
}
#costsheetPage #main #cs-body-area #precs-listbar .pl-chip:hover,
#costsheetPage #main #cs-body-area #actualcost-bar .ac-chip:hover{
  box-shadow: 0 6px 16px -8px rgba(15,23,42,.18) !important;
  transform: translateY(-1px);
}
#costsheetPage #main #cs-body-area #precs-listbar .pl-head,
#costsheetPage #main #cs-body-area #actualcost-bar .ac-head{
  font-size: 12.5px !important;
  letter-spacing: .01em;
}

/* ─── 8) Responsive ─── */
@media (max-width: 900px){
  #costsheetPage #main .cs-toolbar-card{ padding: 16px 16px 4px !important; }
  #costsheetPage #main .fb.cs-status-fb{ margin: 0 -16px 0 !important; padding: 12px 16px !important; }
}