.ta-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin:12px 0;color:#1e3a5f}
[hidden] {display:none!important}
.ta-toolbar button,.ta-dialog button {font:inherit;cursor:pointer;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#243753;padding:10px 14px;min-height:42px}
.ta-dialog button:disabled {opacity:.5;cursor:not-allowed}
.ta-editable {cursor:pointer}.ta-editable:hover {outline:2px solid #60a5fa;outline-offset:-2px}.ta-editable:focus-visible {outline:3px solid #2563eb;outline-offset:-3px}
.ta-edit-badge {padding:4px 8px;color:#1d4ed8;background:#eff6ff;font-size:11px;white-space:normal}
.ta-dialog {box-sizing:border-box;border:0;border-radius:16px 0 0 16px;margin:0 0 0 auto;padding:0;width:min(680px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;color:#172b46;background:#fff;box-shadow:-10px 0 45px #12274433}
.ta-dialog::backdrop {background:#0f172a80}.ta-queue {width:min(1080px,100vw)}
.ta-dialog header {display:flex;gap:16px;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;background:#fff;border-bottom:1px solid #dbe4ee;padding:16px 24px}
.ta-dialog h2 {font-size:20px;margin:0}.ta-dialog h3 {font-size:16px;margin:0 0 10px}.ta-body {padding:20px 24px}.ta-body section {margin-bottom:22px}
.ta-dialog fieldset {border:1px solid #dbe4ee;border-radius:12px;padding:16px;margin:16px 0}.ta-dialog legend {font-weight:650;font-size:14px}
.ta-dialog label {display:block;font-size:14px;margin-bottom:14px}.ta-dialog input:not([type=checkbox]),.ta-dialog select,.ta-dialog textarea {display:block;box-sizing:border-box;width:100%;border:1px solid #bacbdd;border-radius:8px;padding:10px;font:inherit;margin-top:6px;background:#fff;color:#14263e}
.ta-dialog input[type=checkbox] {width:19px;height:19px;vertical-align:middle;margin-right:6px}.ta-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}.ta-toggle {font-weight:600}
.ta-dialog .ta-primary {background:#173956;color:#fff;border-color:#173956}.ta-note {font-size:12px;line-height:1.6;color:#52647c}
.ta-evidence {background:#f4f7fb;border-radius:12px;padding:16px}.ta-evidence dl {margin:0}.ta-evidence dt {font-size:12px;color:#546477;margin-top:10px}.ta-evidence dd {margin:4px 0;overflow-wrap:anywhere}.ta-error {color:#b42318;background:#fef3f2;padding:10px;border-radius:8px}
.ta-item {border:1px solid #dbe4ee;border-radius:10px;padding:14px;margin:10px 0;font-size:14px;overflow-wrap:anywhere}.ta-item p {margin:6px 0;white-space:pre-wrap}.ta-item small {color:#52647c}.ta-self {color:#9a3412;background:#fff7ed;font-weight:600;padding:4px}
.ta-actions {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}.ta-preview {background:#eff6ff;padding:12px;border-radius:10px;margin:12px 0}.ta-dialog :focus-visible {outline:3px solid #60a5fa;outline-offset:2px}
@media(max-width:600px){.ta-grid {grid-template-columns:1fr;gap:0}.ta-body {padding:14px}.ta-dialog header {padding:14px}.ta-dialog {border-radius:0}.ta-toolbar {align-items:stretch;flex-direction:column}}
/* 5/10/2569 HR บันทึกลาแทนพนักงาน (เจ้าของเลือกแบบ ก "สวยดี") · แผงเดิม 2 ทาง: บันทึกลา (มีผลทันที · ม่วง = สีลา) / แก้เวลา-กะ (รอหัวหน้า Time Admin · เดิม) */
.ta-mode {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.ta-dialog .ta-mode button {text-align:left;padding:8px 12px;min-height:0;border-radius:10px;border:1px solid #cbd5e1;background:#fff}
.ta-mode button b {display:block;font-size:14px;color:#0f172a}.ta-mode button small {display:block;font-size:11.5px;color:#64748b;margin-top:2px}
.ta-dialog .ta-mode button.on {border:2px solid #1e2739;background:#f8fafc;padding:7px 11px}
.ta-dialog .ta-mode #taModeLeave.on {border-color:#6d28d9;background:#f5f3ff}.ta-mode #taModeLeave.on b {color:#4c1d95}
.ta-lv-line {font-size:13px;color:#475467;background:#f4f7fb;border-radius:9px;padding:7px 11px;margin:0 0 10px}
.ta-lv-line.bad {background:#fef3f2;border:1px solid #fda29b}.ta-lv-line.bad b {color:#b42318}
.ta-lv-q {margin:12px 0 6px;font-size:13.5px;font-weight:700;color:#0f172a}.ta-lv-q small {font-weight:400;color:#64748b;font-size:12px;margin-left:4px}
.ta-lv-tiles {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.ta-dialog .ta-lv-tile {text-align:left;padding:7px 10px;min-height:0;border-radius:10px}
.ta-lv-tile b {display:block;font-size:13.5px;color:#0f172a}.ta-lv-tile small {display:block;font-size:11.5px;color:#64748b;margin-top:2px}
.ta-dialog .ta-lv-tile.on {border:2px solid #6d28d9;background:#f5f3ff;padding:6px 9px}.ta-lv-tile.on b {color:#4c1d95}
.ta-lv-dates {display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.ta-dialog .ta-lv-dates label {margin:0;font-size:12px;color:#64748b;font-weight:600}.ta-dialog .ta-lv-dates input {margin-top:4px}
.ta-lv-pills {display:flex;gap:4px}
.ta-dialog .ta-lv-pill {min-height:0;padding:8px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ta-dialog .ta-lv-pill.on {background:#6d28d9;border-color:#6d28d9;color:#fff}
.ta-lv-strip {display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.ta-lv-strip div {border:1px solid #ddd6fe;background:#f5f3ff;border-radius:9px;padding:5px 6px;text-align:center;font-size:12.5px;color:#4c1d95;font-weight:700}
.ta-lv-strip small {display:block;font-weight:400;color:#6b7280;font-size:11.5px}
.ta-lv-strip div.off {background:#f8fafc;border-color:#e2e8f0;color:#98a2b3}.ta-lv-strip div.bad {background:#fef3f2;border-color:#fda29b;color:#b42318}
.ta-lv-sum {display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:9px;padding:7px 11px;margin-top:6px;font-size:13px}
.ta-lv-sum b {color:#4c1d95}
.ta-lv-problems {margin:6px 0 0;padding:8px 12px 8px 28px;background:#fef3f2;border:1px solid #fda29b;border-radius:9px;color:#912018;font-size:12.5px}
.ta-dialog .ta-lv-reason {margin:12px 0 0;font-size:12px;color:#64748b;font-weight:600}.ta-dialog .ta-lv-reason textarea {margin-top:4px}
.ta-lv-ok {background:#ecfdf3;border:1px solid #a6f4c5;color:#05603a;border-radius:9px;padding:7px 11px;font-size:12px;margin:10px 0 0}
.ta-lv-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}.ta-lv-foot > span {display:flex;gap:8px;flex-wrap:wrap}
.ta-dialog label.ta-lv-chk {display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
.ta-dialog .ta-lv-go {background:#6d28d9;border-color:#6d28d9;color:#fff;font-weight:700}
.ta-dialog .ta-lv-stop {background:#b42318;border-color:#b42318;color:#fff;font-weight:700}
.ta-lv-card {background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.5;margin:0 0 10px}
.ta-lv-card > b {color:#4c1d95}.ta-lv-meta {display:block;font-size:12px;color:#6b7280}
.ta-lv-acts {display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:8px}
.ta-lv-confirm {background:#fef3f2;border:1px solid #fda29b;border-radius:10px;padding:9px 11px;margin-top:8px;font-size:13px;color:#7a271a}
.ta-dialog .ta-lv-confirm label {margin:8px 0 0;font-size:12px;font-weight:600}
.ta-lv-lock {background:#fffaeb;border:1px solid #fec84b;color:#7a4b00;border-radius:9px;padding:7px 11px;font-size:12.5px;margin:8px 0}
.ta-lv-editing {background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a5f;border-radius:9px;padding:7px 11px;font-size:12.5px;margin:0 0 4px}
@media(max-width:600px){.ta-mode {grid-template-columns:1fr}.ta-lv-dates {grid-template-columns:1fr 1fr}.ta-lv-pills {grid-column:1/-1}}
/* 5/10/2569 เวลาเข้า-ออกแบบ 24 ชั่วโมง (เจ้าของ "HR จะสับสน AM/PM" → "สวยครับ ทำเลย"): ชั่วโมง : นาที · วันเป็นปุ่มภาษาไทย · ปุ่มใช้เวลาตามกะ · แถบสรุป · วันที่ลาเป็นรายการไทย */
.ta-tm-row {display:grid;grid-template-columns:86px auto auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dbe4ee;border-radius:12px;margin:0 0 10px;background:#fff}
.ta-tm-row > b {font-size:14px;color:#0f172a}
.ta-tm-clock {display:flex;align-items:center;gap:4px;font-size:22px;font-weight:700;color:#0f172a}
.ta-dialog .ta-tm-clock select {display:inline-block;width:auto;min-width:74px;height:46px;margin:0;font-size:22px;font-weight:700;padding:0 8px;text-align:center}
.ta-tm-days {display:flex;gap:6px;flex-wrap:wrap}
.ta-dialog .ta-tm-days button {min-height:0;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600}
.ta-dialog .ta-tm-days button.on {background:#173956;border-color:#173956;color:#fff}
.ta-tm-day {font-size:13px;color:#475467;font-weight:600}
.ta-dialog .ta-tm-shift {min-height:0;padding:8px 12px;border-radius:9px;font-size:12.5px;font-weight:700;color:#175cd3;border-color:#84caff;background:#eff5ff;white-space:nowrap}
.ta-tm-sum {background:#ecfdf3;border:1px solid #a6f4c5;color:#05603a;border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 10px}
.ta-tm-sum b {font-size:14px}
.ta-tm-sum.wait {background:#f4f7fb;border-color:#dbe4ee;color:#475467}
.ta-tm-sum.bad {background:#fef3f2;border-color:#fda29b;color:#b42318}
.ta-tm-note {font-size:12px;color:#52647c;margin:0 0 14px}
.ta-dialog .ta-lv-dates select {margin-top:4px;height:42px;padding:0 10px;font-size:15px;font-weight:700}
.ta-dialog .ta-lv-dates select:disabled {background:#f4f7fb;color:#64748b;opacity:1}
@media(max-width:600px){.ta-tm-row {grid-template-columns:auto 1fr}.ta-tm-row > b {grid-column:1/-1}.ta-tm-row > i {display:none}.ta-tm-days {grid-column:1/-1;order:3}.ta-dialog .ta-tm-shift {justify-self:end}}