/* screens-team.css · หน้าจอของ lane M5 S4 (งานทีม · บันทึกเวลางาน · สัญญา/MA · ประเมินผู้ให้บริการ · โครงการ · CR ในพอร์ทัลผู้ให้บริการ)
   ตาม 4-design/app-redesign/DESIGN-TOKENS.md: สีจากตัวแปรใน themes.css เท่านั้น · ระยะ 4/8 · ตัวอักษร ≥ 12px · ไทยไม่ถ่างตัวอักษร ·
   สถานะมีไอคอน + คำเสมอ (ไม่ใช่สีอย่างเดียว) · เป้ากด ≥ 24px · มือถือ ≤ 640px เรียงคอลัมน์เดียว ไม่มีการเลื่อนทั้งหน้าแนวนอน */

/* ── ร่วม ── */
.tw-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tw-subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0; }
.tw-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.tw-grow { flex: 1 1 220px; }
.tw-viewsw { display: inline-flex; gap: 4px; margin-left: auto; }
.tw-summary { margin: 4px 0 12px; font-size: 13px; }
.tw-pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 0; }
.tw-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tw-stack label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tw-form { display: flex; flex-direction: column; gap: 12px; max-width: 60rem; }
.tw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink2); }
/* ช่องกรอกของฟอร์มงานทีม/ลงเวลา = ขนาดเดียวกับฟอร์มหลัก (form.form ของ screens-core) · ช่วยอธิบายชิดช่องที่มันอธิบาย */
.tw-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .tw-form select, .tw-form textarea {
  width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--input); border-radius: var(--r-md, 8px); background: var(--surf); color: var(--ink); font: inherit; font-size: 13.5px; }
.tw-form textarea { min-height: 88px; }
.tw-span2 { grid-column: 1 / -1; }
.tw-form > .note, .tw-form .grid2 + .note { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); }
.tw-form .note + .note { margin-top: -10px; }
.tw-wide { width: 100%; }
.tw-kpi { margin: 4px 0 0; font-size: 13px; }
.tw-kpi .num { font: 500 26px/1.2 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--ink); }
.tw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.tw-kpi-card { border-top: 3px solid var(--brand); }
.tw-kpi-card p { margin: 0; }
.tw-kpi-warn { border-top-color: var(--p2-fg); }
.tw-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.tw-charts .card { min-width: 0; overflow-x: auto; }

/* ชิปสถานะ: ไอคอน 14 + คำ · พื้นตามกลุ่ม (ใหม่/รอ = ขอบ · กำลังทำ = soft · ติด/เลย = p1/p2 · เสร็จ = teal · ยกเลิก = เส้นประ) */
.tw-st { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: var(--r-sm, 6px); font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; border: 1px solid var(--input); background: var(--surf); color: var(--ink2); }
.tw-st .ico { flex: none; }
.tw-st-doing, .tw-sh-submitted, .vo-st-active, .vo-st-in_progress, .vo-st-open, .vo-st-proposed, .vo-st-pending { background: var(--soft); color: var(--fg); border-color: transparent; }
.tw-st-blocked, .tw-sh-returned, .vo-st-at_risk, .vo-st-expiring, .vo-st-on_hold, .vo-st-conditional { background: var(--vendor-bg); color: var(--vendor-fg); border-color: transparent; }
.tw-st-done, .tw-sh-approved, .vo-st-met, .vo-st-accepted, .vo-st-on_track, .vo-st-pass, .vo-st-ok, .vo-st-delivered, .vo-st-done, .vo-st-paid { background: var(--teal-bg); color: var(--teal-fg); border-color: transparent; }
.tw-st-cancelled, .vo-st-cancelled, .vo-st-withdrawn, .vo-st-waived, .vo-st-closed { border-style: dashed; color: var(--muted); }
.tw-sh-none, .vo-st-missed, .vo-st-off_track, .vo-st-fail, .vo-st-rejected, .vo-st-declined, .vo-st-late, .vo-st-expired, .vo-st-issues { background: var(--p1-bg); color: var(--p1-fg); border-color: transparent; }
.tw-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink2); }
.tw-due.overdue, .overdue { color: var(--p1-fg); font-weight: 600; }

/* ── บอร์ดงาน (4 คอลัมน์ · มือถือเรียงลง) ── */
.tw-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tw-col { background: var(--surf2); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); padding: 8px; min-width: 0; }
.tw-col-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 4px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.tw-col-h .count { font: 500 12px/1.6 var(--font-mono, ui-monospace, monospace); background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-pill, 999px); padding: 0 8px; }
.tw-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tw-card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 10px 12px; box-shadow: var(--shadow-1, none); display: flex; flex-direction: column; gap: 4px; }
.tw-card.tw-late { box-shadow: inset 3px 0 0 var(--p1-fg); }
.tw-card p { margin: 0; }
.tw-card-t { font-weight: 600; line-height: 1.45; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tw-card-t:hover { text-decoration: underline; }
.tw-card-m, .tw-card-a { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tw-card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tw-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink2); }
.tw-empty { font-size: 12.5px; padding: 8px; }

/* ── หน้างาน ── */
.tw-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.tw-head p { margin: 4px 0; }
.tw-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.tw-main, .tw-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tw-checklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tw-checklist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.tw-checklist li.tw-done .tw-check-l { color: var(--muted); text-decoration: line-through; }
.tw-check-l { flex: 1 1 180px; overflow-wrap: anywhere; }
.tw-tick { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; border: 0; border-radius: var(--r-md, 8px); background: transparent; color: var(--fg); cursor: pointer; padding: 0; }
.tw-tick:hover { background: var(--sel); }

/* ── ตารางบันทึกเวลา (แป้นพิมพ์ล้วน · ช่องเวลากว้างพอ "10:30") ── */
.tw-weeknav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw-week { font-weight: 600; padding: 0 4px; }
.tw-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.tw-grid { min-width: 860px; }
.tw-grid th, .tw-grid td { vertical-align: top; }
.tw-g-cat { min-width: 140px; }
.tw-g-ref { min-width: 150px; }
.tw-g-note { min-width: 140px; }
.tw-g-day { width: 64px; text-align: center; }
.tw-g-tot { width: 64px; font-weight: 600; }
.tw-grid thead .tw-g-day abbr { text-decoration: none; }
.tw-weekend { background: var(--surf2); }
.tw-today { box-shadow: inset 0 -3px 0 var(--brand); }
.tw-grid select, .tw-grid input { width: 100%; min-height: 32px; font-size: 13px; }
.tw-in-h { text-align: right; padding: 0 6px; }
.tw-in-h[aria-invalid="true"] { border-color: var(--p1-fg); }
.tw-row-err td:first-child { box-shadow: inset 3px 0 0 var(--p1-fg); }
.tw-grid tfoot td, .tw-grid tfoot th { background: var(--surf2); font-weight: 600; }
.tw-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tw-submit p { margin: 0; display: flex; align-items: center; gap: 6px; }

/* ── สัญญา/MA · ผู้ให้บริการ · โครงการ (vendorops) ── */
.vo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.vo-grid > .card { min-width: 0; }
.vo-sla { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.vo-sla div { background: var(--surf2); border-radius: var(--r-md, 8px); padding: 8px 10px; }
.vo-sla dt { font-size: 12px; color: var(--muted); }
.vo-sla dd { margin: 2px 0 0; font: 500 18px/1.3 var(--font-mono, ui-monospace, monospace); color: var(--ink); }
.vo-reminders { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vo-reminders li { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: var(--r-pill, 999px); border: 1px solid var(--input); font-size: 12.5px; }
.vo-reminders li.vo-sent { background: var(--teal-bg); color: var(--teal-fg); border-color: transparent; }
.vo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vo-list > li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.vo-list > li:last-child { border-bottom: 0; }
.vo-list .vo-main { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.vo-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.vo-end { justify-content: flex-end; }
.vo-inline label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.vo-score { display: inline-grid; place-items: center; min-width: 40px; min-height: 28px; border-radius: var(--r-md, 8px); background: var(--soft); color: var(--fg); font: 600 15px/1 var(--font-mono, ui-monospace, monospace); }
.vo-crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 8px 0; }
.vo-crit select { min-height: 32px; }
.vo-phases { list-style: none; margin: 8px 0; padding: 0; display: flex; gap: 0; overflow-x: auto; }
.vo-phases li { flex: 1 1 0; min-width: 120px; padding: 8px 10px; border-top: 4px solid var(--input); font-size: 13px; }
.vo-phases li.vo-ph-active { border-top-color: var(--brand); background: var(--soft); }
.vo-phases li.vo-ph-done { border-top-color: var(--teal-fg); }
.vo-phases li.vo-ph-cancelled { border-top-style: dashed; color: var(--muted); }
.vo-phases b { display: block; font-weight: 600; line-height: 1.45; }
.vo-budget td.num, .vo-budget th.num { text-align: right; }
.vo-bar { display: block; width: 100%; height: 8px; }
.vo-health { display: inline-flex; align-items: center; gap: 6px; }
.vo-windows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vo-windows li { border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }

/* ── จอแคบ ── */
@media (max-width: 1100px) {
  .tw-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tw-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tw-board { grid-template-columns: minmax(0, 1fr); }
  .tw-viewsw { margin-left: 0; }
  .tw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-charts, .vo-grid { grid-template-columns: minmax(0, 1fr); }
  .tw-head .btn, .tw-moves .btn { min-height: 44px; }
  .tw-tick { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-card, .tw-tick { transition: none; }
}