/* ════════════════════════════════════════════════════════════════════
   T-Costsheet Office 365 UI Redesign — v18.67.0
   ────────────────────────────────────────────────────────────────────
   Scope:
   - Layout: padding 24px (Fluent UI), border-radius 4px (sharp Office)
   - 3-panel sections: ราคาขาย (Blue) / ต้นทุนประมาณ (Amber) / ต้นทุนจริง (Green)
   - Summary Card 4 metrics
   - ไม่แตะ logic / data structure — visual only
   ════════════════════════════════════════════════════════════════════ */

/* ─── Root tokens ─── */
#costsheetPage{
  --c67-bg:         #FAF9F8;
  --c67-canvas:     #F3F2F1;
  --c67-surface:    #FFFFFF;
  --c67-line:       #EDEBE9;
  --c67-line-strong:#D2D0CE;
  --c67-text:       #201F1E;
  --c67-text-mute:  #605E5C;
  --c67-text-soft:  #8A8886;
  --c67-radius:     4px;
  --c67-radius-lg:  6px;
  --c67-shadow-1:   0 1px 2px rgba(0,0,0,.04);
  --c67-shadow-2:   0 1.6px 3.6px rgba(0,0,0,.08), 0 .3px .9px rgba(0,0,0,.06);

  /* Sell — Blue (รายได้) */
  --c67-sell:       #0078D4;
  --c67-sell-soft:  #DEECF9;
  --c67-sell-soft2: #EFF6FC;
  --c67-sell-text:  #0C447C;

  /* Estimate — Amber (ประมาณการ locked) */
  --c67-est:        #CA5010;
  --c67-est-soft:   #FFF4CE;
  --c67-est-soft2:  #FFFBEB;
  --c67-est-text:   #7A3A08;

  /* Detail/Cost — Green (ต้นทุนจริง) */
  --c67-det:        #107C10;
  --c67-det-soft:   #DFF6DD;
  --c67-det-soft2:  #F0FDF4;
  --c67-det-text:   #0E700E;

  /* Status accents */
  --c67-warn:       #A4262C;
  --c67-warn-soft:  #FCEBEB;
}

/* ─── Page-level full-bleed layout ─── */
#costsheetPage{
  background: var(--c67-bg);
}
#costsheetPage .cs365-shell{
  background: var(--c67-bg);
  padding: 0;
}
#costsheetPage .cs365-content{
  max-width: none;       /* full width */
  padding: 20px 28px 32px;
  margin: 0;
}

/* ─── CS detail container — main canvas ─── */
#costsheetPage #cs-main-container{
  background: var(--c67-bg);
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* ─── Form card (header) — ใส่ container แบบ Office ─── */
#costsheetPage .fc{
  background: var(--c67-surface);
  border: 1px solid var(--c67-line);
  border-radius: var(--c67-radius-lg);
  padding: 18px 22px !important;
  margin-bottom: 14px;
  box-shadow: var(--c67-shadow-1);
}

/* ─── Tabs — Fluent style ─── */
#costsheetPage .tabs{
  background: var(--c67-surface);
  border: 1px solid var(--c67-line);
  border-radius: var(--c67-radius-lg) var(--c67-radius-lg) 0 0;
  border-bottom: none;
  padding: 0 8px;
  display: flex;
  gap: 2px;
  margin: 0;
}
#costsheetPage .tabs .tab{
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  color: var(--c67-text-mute) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
#costsheetPage .tabs .tab:hover{
  background: var(--c67-canvas) !important;
  color: var(--c67-text) !important;
}
#costsheetPage .tabs .tab.on{
  color: var(--c67-sell) !important;
  border-bottom-color: var(--c67-sell) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* ─── Tab content pane ─── */
#costsheetPage #tab-sell,
#costsheetPage #tab-cost,
#costsheetPage #tab-ap,
#costsheetPage #tab-po{
  background: var(--c67-surface);
  border: 1px solid var(--c67-line);
  border-top: none;
  border-radius: 0 0 var(--c67-radius-lg) var(--c67-radius-lg);
  padding: 18px 22px;
  margin-bottom: 14px;
  min-height: 200px;
}

/* ─── Mode notes (กล่องคำอธิบายด้านบนตาราง) ─── */
#costsheetPage .mode-note{
  border-radius: var(--c67-radius);
  padding: 11px 14px;
  font-size: 12.5px;
  margin-bottom: 14px;
}
#costsheetPage .mode-note strong{
  font-size: 13px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   3-PANEL SECTIONS (v18.67.0 core)
   ─── ใส่ class .c67-section + .c67-sell / .c67-est / .c67-det ───
═══════════════════════════════════════════════════════════════════ */
.c67-section{
  background: var(--c67-surface);
  border: 1px solid var(--c67-line);
  border-radius: var(--c67-radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--c67-shadow-1);
}

/* Header bar ของ section */
.c67-section-head{
  padding: 11px 16px;
  border-bottom: 2px solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.c67-section-head .c67-title{
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.c67-section-head .c67-title .c67-icon{ font-size: 18px; line-height: 1; }
.c67-section-head .c67-sub{
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
  opacity: .8;
}
.c67-section-head .c67-amount{
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* Sell — Blue */
.c67-sell .c67-section-head{
  background: linear-gradient(90deg, var(--c67-sell-soft) 0%, var(--c67-sell-soft2) 100%);
  border-bottom-color: var(--c67-sell);
  color: var(--c67-sell-text);
}

/* Estimate — Amber */
.c67-est .c67-section-head{
  background: linear-gradient(90deg, var(--c67-est-soft) 0%, var(--c67-est-soft2) 100%);
  border-bottom-color: var(--c67-est);
  color: var(--c67-est-text);
}
.c67-est .c67-section-head .c67-lock{
  font-size: 11px;
  background: rgba(255,255,255,.6);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

/* Detail/Cost — Green */
.c67-det .c67-section-head{
  background: linear-gradient(90deg, var(--c67-det-soft) 0%, var(--c67-det-soft2) 100%);
  border-bottom-color: var(--c67-det);
  color: var(--c67-det-text);
}

/* ─── Section body / table area ─── */
.c67-section-body{
  padding: 0;       /* table touches edges */
}
.c67-section-body .twrap{
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: var(--c67-surface) !important;
}
.c67-section-body table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.c67-section-body table thead{
  background: var(--c67-canvas);
}
.c67-section-body table thead th{
  padding: 10px 12px;
  text-align: left;
  color: var(--c67-text);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--c67-line-strong);
  white-space: nowrap;
}
.c67-section-body table thead th.num,
.c67-section-body table thead th[class*="num"]{
  text-align: right;
}
.c67-section-body table tbody tr{ background: var(--c67-surface); }
.c67-section-body table tbody tr:nth-child(even){ background: var(--c67-bg); }
.c67-section-body table tbody td{
  padding: 8px 12px;
  border-bottom: 1px solid var(--c67-line);
  vertical-align: middle;
}
.c67-section-body table tbody td.num{ text-align: right; font-variant-numeric: tabular-nums; }

/* ─── Add row buttons (ภายใน section) ─── */
.c67-section-body .addrow{
  margin: 0;
  padding: 9px 14px;
  border: none;
  border-top: 1px dashed var(--c67-line-strong);
  width: 100%;
  text-align: left;
  background: var(--c67-bg);
  color: var(--c67-text-mute);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.c67-section-body .addrow:hover{
  background: var(--c67-canvas);
  color: var(--c67-text);
}

/* ═══════════════════════════════════════════════════════════════════
   SUMMARY CARD — 4 metrics ด้านล่าง
═══════════════════════════════════════════════════════════════════ */
.c67-summary{
  background: var(--c67-surface);
  border: 1px solid var(--c67-line);
  border-radius: var(--c67-radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  box-shadow: var(--c67-shadow-1);
}
.c67-summary-item{
  text-align: center;
  padding: 6px 10px;
  border-right: 1px solid var(--c67-line);
}
.c67-summary-item:last-child{ border-right: none; }
.c67-summary-item .lab{
  font-size: 11px;
  color: var(--c67-text-mute);
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: none;
}
.c67-summary-item .val{
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.c67-summary-item .sub{
  font-size: 11px;
  color: var(--c67-text-mute);
}

.c67-summary-item.c67-m-sell .val{ color: var(--c67-sell-text); }
.c67-summary-item.c67-m-est  .val{ color: var(--c67-est-text); }
.c67-summary-item.c67-m-det  .val{ color: var(--c67-det-text); }
.c67-summary-item.c67-m-diff.up   .val{ color: var(--c67-warn); }
.c67-summary-item.c67-m-diff.down .val{ color: var(--c67-det-text); }
.c67-summary-item.c67-m-diff.same .val{ color: var(--c67-text-mute); }

/* Responsive: stack on narrow screens */
@media (max-width: 900px){
  #costsheetPage .cs365-content{ padding: 14px 16px 24px; }
  #costsheetPage #tab-sell,
  #costsheetPage #tab-cost,
  #costsheetPage #tab-ap,
  #costsheetPage #tab-po{ padding: 14px 16px; }
  .c67-summary{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .c67-summary-item{ border-right: none; border-bottom: 1px solid var(--c67-line); padding-bottom: 10px; }
  .c67-summary-item:nth-last-child(-n+2){ border-bottom: none; }
  .c67-section-head{ padding: 10px 12px; }
  .c67-section-head .c67-amount{ font-size: 16px; }
}

/* ─── Hide ของเดิมเมื่อ v18.67 ทำงาน เพื่อกัน double-render ─── */
.c67-active .mode-note{ display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   v18.35 SNAPSHOT SECTION — Override เป็น Amber theme
   ─── selector: .tge-section-estimate (จาก v18.35 ไม่ใช่ class c67) ───
═══════════════════════════════════════════════════════════════════════ */
.c67-active .tge-section-estimate{
  background: var(--c67-surface) !important;
  border: 1px solid var(--c67-line) !important;
  border-radius: var(--c67-radius-lg) !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-shadow: var(--c67-shadow-1) !important;
  padding: 0 !important;
}
.c67-active .tge-section-estimate .tge-header{
  background: linear-gradient(90deg, var(--c67-est-soft) 0%, var(--c67-est-soft2) 100%) !important;
  border-bottom: 2px solid var(--c67-est) !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--c67-est-text) !important;
}
.c67-active .tge-section-estimate .tge-header h3{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--c67-est-text) !important;
  margin: 0 !important;
}
.c67-active .tge-section-estimate .tge-header h3 small{
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
  opacity: .8 !important;
  color: var(--c67-est-text) !important;
}
.c67-active .tge-section-estimate .tge-icon-circle{
  background: rgba(255,255,255,.7) !important;
  color: var(--c67-est-text) !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
}
.c67-active .tge-section-estimate .tge-meta{
  text-align: right !important;
  font-size: 11px !important;
  color: var(--c67-est-text) !important;
}
.c67-active .tge-section-estimate .tge-lock-badge{
  font-size: 11px !important;
  background: rgba(255,255,255,.6) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  color: var(--c67-est-text) !important;
  border: none !important;
}
.c67-active .tge-section-estimate .tge-legend{
  padding: 8px 16px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  background: var(--c67-est-soft2) !important;
  border-bottom: 1px solid var(--c67-line) !important;
  color: var(--c67-est-text) !important;
  border-radius: 0 !important;
}
.c67-active .tge-section-estimate .twrap{
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.c67-active .tge-section-estimate table thead{
  background: var(--c67-canvas) !important;
}
.c67-active .tge-section-estimate table thead th{
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--c67-text) !important;
  border-bottom: 1px solid var(--c67-line-strong) !important;
}
.c67-active .tge-section-estimate table tbody tr:nth-child(even){ background: var(--c67-bg) !important; }
.c67-active .tge-section-estimate table tbody td{
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--c67-line) !important;
  font-size: 12.5px !important;
}

/* ─── Hide tge-compare-card-v1830 (เก่า) เพราะ summary card ใหม่แทนแล้ว ─── */
.c67-active #tge-compare-card-v1830{
  display: none !important;
}

/* ─── Empty state (ยังไม่มี snapshot) — ใส่สี amber ที่ชัดขึ้น ─── */
.c67-active .tge-no-snapshot{
  background: var(--c67-est-soft2) !important;
  border: 1px dashed var(--c67-est) !important;
  border-radius: var(--c67-radius-lg) !important;
  margin-bottom: 14px !important;
  padding: 12px 16px !important;
}
.c67-active .tge-no-snapshot strong{ color: var(--c67-est-text) !important; }
.c67-active .tge-no-snapshot small{ color: var(--c67-est-text) !important; opacity: .85; }

/* ════════════════════════════════════════════════════════════════════
   v18.67.1 — HOTFIX FIXES
   ────────────────────────────────────────────────────────────────────
   1. Header เต็มความกว้าง (เท่า content)
   2. แก้ช่องสีเหลือง — input ใน table ราคาขาย/ต้นทุน
   3. ซ่อนปุ่ม "บันทึกเป็น Template" ใน header → จะแสดงเป็น floating
   4. floating bar (ลบ + Template + แก้ไข) bottom-right
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1) Header เต็มความกว้าง (แก้ขอบแคบ) ─── */
#costsheetPage .cs365-header,
#costsheetPage .cs365-tabs,
#costsheetPage .cs365-command{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#costsheetPage .cs365-shell{
  padding: 0 !important;
}
#costsheetPage .cs365-header{
  border-radius: 0 !important;
  padding: 18px 28px !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
#costsheetPage .cs365-content{
  max-width: none !important;
  padding: 18px 28px 32px !important;
  margin: 0 !important;
}

/* ─── 2) แก้ input number ช่องสีเหลือง (บราวเซอร์ default style) ─── */
#costsheetPage .c67-active input.ci,
.c67-active input.ci{
  background: #fff !important;
  border: 1px solid var(--c67-line) !important;
  border-radius: var(--c67-radius) !important;
  padding: 6px 10px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.c67-active input.ci:focus{
  outline: none !important;
  border-color: var(--c67-sell) !important;
  box-shadow: 0 0 0 1px var(--c67-sell) !important;
}
.c67-active input.ci:disabled,
.c67-active input.ci[readonly]{
  background: #faf9f8 !important;
  color: var(--c67-text-mute) !important;
  cursor: not-allowed !important;
}
/* number alignment */
.c67-active input.ci.r,
.c67-active input.ci[type="number"]{
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
/* hide browser native number spinners (สาเหตุ "ช่องเหลือง") */
.c67-active input.ci[type="number"]::-webkit-outer-spin-button,
.c67-active input.ci[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.c67-active input.ci[type="number"]{
  -moz-appearance: textfield !important;
}

/* ─── 2.5) Select dropdown supplier — ให้สวยเหมือน input ─── */
.c67-active select.ci{
  background: #fff !important;
  border: 1px solid var(--c67-line) !important;
  border-radius: var(--c67-radius) !important;
  padding: 6px 10px !important;
  height: 32px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.c67-active select.ci:focus{
  outline: none !important;
  border-color: var(--c67-sell) !important;
}
.c67-active select.ci:disabled{
  background: #faf9f8 !important;
  cursor: not-allowed !important;
}

/* ─── 2.6) Cell padding เพิ่ม + alignment ─── */
.c67-section-body table td{
  vertical-align: middle !important;
}
.c67-section-body table td input.ci{
  margin: 0 !important;
}

/* ─── 3) Header ของ openProj — ซ่อนปุ่ม Template เก่า (จะมาเป็น floating) ─── */
.c67-active .fc > div:first-child > button[onclick*="openSaveCSAsTemplateModal"]{
  display: none !important;
}

/* ─── 4) Floating action bar (bottom-right) ─── */
#cs-floating-bar-v1867{
  /* injected via JS — basic styles already inline */
}
#cs-floating-bar-v1867 button{
  font-family: inherit !important;
}

/* ปุ่มเดิมของ delete จาก v18.63.0 ที่ inject ใน header — ซ่อน */
#cs-soft-delete-btn-v1863{
  display: none !important;
}

/* ปุ่ม PDF ของ v18.18 (เก่า) — ซ่อนเพราะมี floating ใหม่ */
.c67-active .v1818-cs-pdf-btn{
  display: none !important;
}

/* ─── v18.68.0: ซ่อนปุ่ม PDF เก่า (v18.18 inject ใน header) เพราะมี floating ใหม่ ─── */
.v1818-cs-pdf-btn,
button.v1818-cs-pdf-btn{
  display: none !important;
}

/* ─── 5) Status filter bar — wrap + alignment ─── */
#costsheetPage main .fb{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#costsheetPage main .fb .cs-trash-btn-v1867{
  margin-left: auto !important;
}

/* ─── 6) Trash row hover ─── */
.c67-active main tbody tr:hover{
  background: var(--c67-canvas) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v18.68.3 — Fix sell/cost table layout
   ────────────────────────────────────────────────────────────────────
   1. ซ่อน column 1 (empty 26px) ของหัวตาราง — ดูเหมือน "checkbox"
   2. เพิ่ม visibility ของ tabs (sell/cost/ap/po) ให้เห็นชัด
   3. เน้น tab ที่เลือก
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1) Hide empty leading + trailing columns ของตาราง sell/cost ─── */
.c67-active #tab-sell table thead tr th:first-child,
.c67-active #tab-cost table thead tr th:first-child{
  /* column index ใน core: width:26px ที่ Off เห็นเป็น checkbox */
  background: transparent !important;
  border-left: none !important;
  border-top: none !important;
  /* เก็บ space เอาไว้ให้ row index — ไม่ลบ */
}

/* row body column แรก (แถวเลข 1, 2, 3, ...) ให้ดูเป็น index ไม่เป็น input */
.c67-active #tab-sell table tbody tr td:first-child,
.c67-active #tab-cost table tbody tr td:first-child{
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  text-align: center !important;
  color: var(--c67-text-mute) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* trailing column (delete button) */
.c67-active #tab-sell table thead tr th:last-child,
.c67-active #tab-cost table thead tr th:last-child{
  background: transparent !important;
  border: none !important;
}

/* ─── 2) Tabs เด่นขึ้น — ให้ Off เห็นชัดว่ามี tab ต้นทุน ─── */
.c67-active .tabs{
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--c67-line) !important;
  padding-bottom: 0 !important;
}
.c67-active .tabs .tab{
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  color: var(--c67-text-mute) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.c67-active .tabs .tab:hover{
  background: var(--c67-canvas) !important;
  color: var(--c67-text) !important;
}
.c67-active .tabs .tab.on{
  background: var(--c67-sell-soft) !important;
  border-color: var(--c67-sell) !important;
  border-bottom-color: var(--c67-sell) !important;
  color: var(--c67-sell-text) !important;
  font-weight: 600 !important;
}

/* ─── 3) Make sure tab "ต้นทุน" + "ขออนุมัติ" + "รายการ PO" visible ─── */
.c67-active .tabs .tab[onclick*="cost"],
.c67-active .tabs .tab[onclick*="ap"],
.c67-active .tabs .tab[onclick*="po"]{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ─── v18.68.4: Force ALL tabs visible — กัน MutationObserver แตะ DOM แล้วซ่อน ─── */
.c67-active .tabs > .tab,
.c67-active .tabs > button.tab,
#costsheetPage .tabs > .tab,
#costsheetPage .tabs > button.tab{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.c67-active .tabs,
#costsheetPage .tabs{
  display: flex !important;
  flex-wrap: wrap !important;
}