/* ตารางแบบ Excel ใน js/sheet-grid.js — ใช้ในฟอร์มสร้าง/แก้ไขชุดข้อมูลแบบตาราง */
.sg-wrap{ display:flex; flex-direction:column; gap:8px; }
.sg-scroll{
  overflow:auto; max-height:46vh;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card);
  -webkit-overflow-scrolling:touch;
}
.sg-table{ border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; }
.sg-table th, .sg-table td{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.sg-table tr:last-child td, .sg-table tr:last-child th{ border-bottom:none; }

.sg-corner, .sg-colhead, .sg-rownum{ background:#F3F1EA; color:var(--muted); font-weight:600; font-size:var(--fs-xs); }
.sg-corner{ position:sticky; top:0; left:0; z-index:4; width:48px; min-width:48px; height:28px; }
.sg-colhead{ position:sticky; top:0; z-index:3; height:28px; min-width:140px; text-align:center; }
.sg-colhead span{ display:inline-block; line-height:28px; }
.sg-rownum{ position:sticky; left:0; z-index:2; width:48px; min-width:48px; text-align:center; }
.sg-rownum span{ display:inline-block; }

.sg-del{
  position:absolute; background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:16px; line-height:1; padding:2px 6px; border-radius:6px;
}
.sg-del:hover{ color:var(--danger); background:rgba(var(--danger-rgb),0.1); }
.sg-colhead{ position:sticky; }
.sg-del-col{ top:3px; right:2px; }
.sg-rownum{ position:sticky; }
.sg-del-row{ top:50%; right:0; transform:translateY(-50%); }

.sg-cell{
  display:block; width:100%; min-width:0; box-sizing:border-box; /* size=1 ใน JS กันความกว้างเริ่มต้นของ input ดันคอลัมน์ให้กว้างเกิน; ความกว้างขั้นต่ำมาจาก .sg-colhead */
  border:none; outline:none; background:transparent; color:inherit;
  font:inherit; font-size:16px; /* 16px กัน iPad/iPhone Safari ซูมหน้าจอตอนแตะช่อง */
  padding:10px 12px;
}
.sg-cell:focus{ box-shadow:inset 0 0 0 2px var(--black); background:#FFFCEB; }
.sg-header-row .sg-cell{ font-weight:700; background:#FBF6E4; }
.sg-header-row .sg-cell:focus{ background:#FFF6D0; }
.sg-header-row td{ position:sticky; top:28px; z-index:1; }
.sg-header-row td, .sg-header-row .sg-rownum{ border-bottom:2px solid var(--line); }
.sg-header-row .sg-rownum{ top:28px; z-index:3; background:#F3EBCB; color:var(--ink); }

.sg-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sg-toolbar .btn{ width:auto; padding:6px 14px; font-size:var(--fs-sm); }
.sg-stats{ margin-left:auto; font-size:var(--fs-xs); color:var(--muted); }
.sg-hint{ font-size:var(--fs-xs); color:var(--muted); }