/* 📗 จำลองแบบชีต (ota-sheetsim.js) — หน้าตาเหมือน Google Sheets: กระดาษขาว ตัว Arial 10pt หัวคอลัมน์/เลขแถวเทา */
.ss-bar { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:6px; }
.ss-bar .iot-tabs { flex-wrap:wrap; }
.ss-sp { flex:1; }
.ss-zoom select { font:inherit; padding:2px 4px; border-radius:6px; }
.ss-reset { background:#fff4d6 !important; border-color:#e9b949 !important; color:#7a5200 !important; }
.ss-note { margin:2px 0 6px; line-height:1.6; }
.ss-key { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-1px; }
.ss-key.ed { background:#fff2b3; box-shadow:inset 0 0 0 2px #f4b400; }
.ss-key.ch { background:#fde2e1; box-shadow:inset 0 0 0 1px #ea4335; }
.ss-fx { display:flex; align-items:center; gap:0; border:1px solid #c7c7c7; border-bottom:0; background:#fff; color:#202124; font:13px Arial, sans-serif; }
.ss-ref { width:72px; padding:4px 8px; border-right:1px solid #c7c7c7; font-weight:600; text-align:center; }
.ss-fxi { padding:0 8px; color:#80868b; font-style:italic; border-right:1px solid #e0e0e0; }
.ss-fxin { flex:1; border:0; outline:0; padding:4px 8px; font:13px Arial, sans-serif; background:transparent; color:#202124; min-width:0; }
.ss-wrap { overflow:auto; max-height:78vh; border:1px solid #c7c7c7; background:#fff; position:relative; -webkit-overflow-scrolling:touch; }
.ss-tbl { border-collapse:collapse; table-layout:fixed; font:13px Arial, sans-serif; color:#000; background:#fff; }
.ss-tbl td, .ss-tbl th { box-sizing:border-box; }
.ss-tbl td.ss-c { padding:0 3px; border:1px solid #e2e3e3; overflow:hidden; line-height:1.25; background-clip:padding-box; background-color:#fff; cursor:cell; }
.ss-tbl td.ss-c.ov { white-space:nowrap; overflow:hidden; text-overflow:clip; }
.ss-tbl td.ss-c.ovx { overflow:visible; }
.ss-tbl td.ss-c.cl { white-space:nowrap; overflow:hidden; text-overflow:clip; }
.ss-tbl td.ss-c.wr { white-space:pre-wrap; word-break:break-word; }
.ss-ovf { position:relative; z-index:1; white-space:nowrap; overflow:hidden; pointer-events:none; }
.ss-tbl th { background:#f8f9fa; color:#5f6368; font:11px Arial, sans-serif; font-weight:400; border:1px solid #c7c7c7; text-align:center; padding:0; position:sticky; z-index:3; }
.ss-tbl thead th { top:0; height:20px; }
.ss-tbl th.ss-rh { left:0; z-index:3; }
.ss-tbl th.ss-corner { left:0; top:0; z-index:6; }
.ss-tbl thead th.fz { z-index:5; }
.ss-tbl th.ss-rh.fzr { z-index:5; }
.ss-tbl th.on { background:#d3e3fd; color:#0b57d0; font-weight:700; }
.ss-tbl td.fz, .ss-tbl td.fzr { position:sticky; z-index:2; }
.ss-tbl td.fzx { z-index:4; }
.ss-tbl td.fz { box-shadow:inset -1px 0 0 #e2e3e3; }
/* เส้นตรึงหนาแบบชีต: คอลัมน์/แถวสุดท้ายที่ตรึง */
.ss-tbl td.ed { box-shadow:inset 0 0 0 2px #f4b400 !important; background-color:#fff2b3 !important; }
.ss-tbl td.ch:not(.ed) { box-shadow:inset 0 0 0 1px #ea4335; }
.ss-tbl td.sel { outline:2px solid #1a73e8; outline-offset:-2px; }
.ss-in { width:100%; height:100%; min-height:18px; border:0; outline:2px solid #1a73e8; padding:0 2px; font:inherit; background:#fff; color:#000; box-sizing:border-box; }
@media (max-width:700px) {
  .ss-tbl td.fz, .ss-tbl thead th.fz { position:static; }
  .ss-tbl td.fzr { position:sticky; }
  .ss-wrap { max-height:70vh; }
}

/* ═════ 🎛️ มุมมองปรับง่าย (18 ต.ค. 69 รีดีไซน์) — ใช้สีธีมแอป (--card/--text/--primary) มืด/สว่างได้ ═════ */
.se-head { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.se-otas { display:flex; flex-wrap:wrap; gap:6px; }
.se-ota { border:1px solid var(--border); background:var(--card2, var(--card)); color:var(--text); padding:7px 14px; border-radius:999px; font:inherit; font-weight:600; cursor:pointer; transition:.15s; }
.se-ota:hover { border-color:var(--primary); }
.se-ota.on { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.3); }
.se-head2, .se-top { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.se-segs { display:inline-flex; background:var(--bg2, var(--bg)); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.se-seg { border:0; background:transparent; color:var(--text2, var(--text)); padding:6px 12px; border-radius:8px; font:inherit; font-size:.92em; cursor:pointer; white-space:nowrap; }
.se-seg.on { background:var(--card); color:var(--text); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.se-seg.hi.on { color:#7c3aed; } .se-seg.lo.on { color:#dc2626; }
:root[data-theme="dark"] .se-seg.hi.on { color:#c4b5fd; } :root[data-theme="dark"] .se-seg.lo.on { color:#fca5a5; }
.se-chk { display:inline-flex; align-items:center; gap:6px; font-size:.9em; color:var(--text2, var(--text)); cursor:pointer; white-space:nowrap; }
.se-sel, .se-q { font:inherit; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }
.se-q { width:170px; }
.se-top { margin-bottom:12px; }

.se-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-bottom:14px; }
.se-kpi { background:var(--card2, var(--card)); border:1px solid var(--border); border-radius:14px; padding:12px 14px; transition:.2s; }
.se-kpi.ch { border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.se-kpi.warn .se-kv { color:var(--danger); }
.se-kl { font-size:.85em; color:var(--text2, var(--text)); }
.se-kv { font-size:1.75em; font-weight:700; line-height:1.2; margin:2px 0; font-variant-numeric:tabular-nums; }
.se-kv small { font-size:.5em; font-weight:500; color:var(--text2, var(--text)); }
.se-ks { font-size:.82em; color:var(--text3, var(--text2)); }
.se-delta { display:inline-block; padding:0 6px; border-radius:6px; font-weight:700; margin-left:4px; }
.se-delta.up { background:rgba(16,185,129,.15); color:var(--success); }
.se-delta.down { background:rgba(239,68,68,.14); color:var(--danger); }
.se-delta.neu { background:rgba(245,158,11,.16); color:#b45309; }
:root[data-theme="dark"] .se-delta.neu { color:#fcd34d; }

.se-chgs { border:1px solid rgba(245,158,11,.45); background:rgba(245,158,11,.07); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.se-chgh { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.se-chg { display:flex; gap:10px; align-items:baseline; padding:4px 0; border-top:1px dashed rgba(245,158,11,.3); font-size:.92em; }
.se-chg span { flex:1; color:var(--text2, var(--text)); }
.se-chg button { border:0; background:transparent; color:var(--text3, var(--text2)); cursor:pointer; font-size:1em; }
.se-chg button:hover { color:var(--danger); }

.se-main { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:14px; align-items:start; }
.se-left { min-width:0; }
.se-right { position:sticky; top:70px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.se-lh { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.se-help { font-size:.82em; color:var(--text3, var(--text2)); margin-bottom:10px; }
.se-grp { border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; background:var(--card); }
.se-gh { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--card2, var(--bg2)); border-bottom:1px solid var(--border-soft, var(--border)); }
.se-gh b { flex:1; font-size:.95em; }
.se-gn { padding:6px 12px 0; font-size:.8em; color:var(--text3, var(--text2)); }
.se-gw { margin:6px 12px 0; font-size:.82em; color:#b45309; }
.se-gc { font-size:.78em; padding:1px 8px; border-radius:999px; background:var(--bg2, var(--bg)); color:var(--text3, var(--text2)); white-space:nowrap; }
.se-gc.on { background:rgba(16,185,129,.14); color:var(--success); }
.se-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto 26px; gap:10px; align-items:center; padding:8px 12px; border-top:1px solid var(--border-soft, var(--border)); }
.se-grp .se-gh + .se-row, .se-grp .se-gn + .se-row, .se-grp .se-gw + .se-row { border-top:0; }
.se-row:not(.on) .se-n { color:var(--text3, var(--text2)); }
.se-row.on { background:rgba(16,185,129,.05); }
.se-row.ch { background:rgba(245,158,11,.09); box-shadow:inset 3px 0 0 #f59e0b; }
.se-n { font-weight:600; font-size:.94em; line-height:1.3; }
.se-sub { display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:2px; }
.se-cond { font-size:.78em; color:var(--text3, var(--text2)); }
.se-tag { font-size:.75em; padding:0 6px; border-radius:5px; background:var(--bg2, var(--bg)); color:var(--text2, var(--text)); }
.se-tag.auto { background:rgba(59,130,246,.12); color:var(--primary); }
.se-tag.was { background:rgba(245,158,11,.18); color:#b45309; }
:root[data-theme="dark"] .se-tag.was, :root[data-theme="dark"] .se-gw { color:#fcd34d; }
.se-sw { position:relative; width:38px; height:22px; flex:none; cursor:pointer; }
.se-sw input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.se-sw span { position:absolute; inset:0; border-radius:999px; background:var(--bg3, #cbd5e1); transition:.18s; }
.se-sw span::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.se-sw input:checked + span { background:var(--success); }
.se-sw input:checked + span::after { transform:translateX(16px); }
.se-sw input:focus-visible + span { outline:2px solid var(--primary); outline-offset:2px; }
.se-step { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--card); }
.se-step button { width:30px; height:32px; border:0; background:var(--bg2, var(--bg)); color:var(--text); font-size:1.1em; cursor:pointer; }
.se-step button:hover { background:var(--primary); color:#fff; }
.se-step input { width:52px; height:32px; border:0; text-align:right; font:inherit; font-weight:700; font-variant-numeric:tabular-nums; background:transparent; color:var(--text); padding:0 2px; }
.se-step input.txt { width:60px; text-align:center; font-weight:500; color:var(--text3, var(--text2)); }
.se-step input:focus { outline:0; background:rgba(59,130,246,.08); }
.se-pc { padding-right:6px; color:var(--text2, var(--text)); font-size:.9em; }
.se-undo { border:0; background:transparent; color:var(--text3, var(--text2)); cursor:pointer; font-size:1.05em; padding:0; }
.se-undo:hover { color:#f59e0b; }
.se-undo.hide { visibility:hidden; }

.se-card { border:1px solid var(--border); border-radius:12px; background:var(--card); padding:10px 12px; }
.se-ch { font-weight:700; margin-bottom:8px; font-size:.95em; }
.se-st { display:flex; gap:8px; align-items:baseline; padding:5px 2px; border-bottom:1px dashed var(--border-soft, var(--border)); font-size:.9em; }
.se-st:last-child { border-bottom:0; }
.se-st span { flex:1; color:var(--text2, var(--text)); }
.se-st b { font-variant-numeric:tabular-nums; }
.se-st s { color:var(--text3, var(--text2)); font-size:.85em; }
.se-st.key { background:rgba(59,130,246,.07); border-radius:6px; padding:6px 6px; border-bottom-color:transparent; margin:2px 0; }
.se-st.key span { color:var(--text); font-weight:600; }
.se-st.key b { font-size:1.08em; }
.se-st.ch b { color:#d97706; }
.se-tw { overflow:auto; max-height:420px; }
.se-tbl { width:100%; border-collapse:collapse; font-size:.86em; font-variant-numeric:tabular-nums; }
.se-tbl th { position:sticky; top:0; background:var(--card); text-align:left; font-weight:600; color:var(--text2, var(--text)); padding:6px; border-bottom:1px solid var(--border); white-space:nowrap; }
.se-tbl td { padding:5px 6px; border-bottom:1px solid var(--border-soft, var(--border)); white-space:nowrap; }
.se-tbl .r { text-align:right; }
.se-tbl tr { cursor:pointer; }
.se-tbl tbody tr:hover { background:var(--hover, rgba(59,130,246,.06)); }
.se-tbl tr.sel { background:rgba(59,130,246,.12); }
.se-tbl td.ch { color:#d97706; font-weight:700; }
.se-gap { padding:0 6px; border-radius:6px; font-weight:600; }
.se-gap.ok { color:var(--success); background:rgba(16,185,129,.1); }
.se-gap.bad { color:var(--danger); background:rgba(239,68,68,.1); }
.se-foot { margin-top:12px; }
@media (max-width:980px) {
  .se-main { grid-template-columns:1fr; }
  .se-right { position:static; }
  .se-kpis { position:sticky; top:0; z-index:6; background:var(--bg); padding:6px 0; margin:0 0 10px; }
}
@media (max-width:600px) {
  .se-kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .se-kv { font-size:1.2em; }
  .se-kpi { padding:8px 10px; border-radius:10px; }
  .se-kl, .se-ks { font-size:.75em; }
  .se-row { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:8px 10px; }
  .se-undo { grid-column:3; justify-self:end; }
  .se-q { width:100%; }
  .se-ota { padding:6px 11px; font-size:.92em; }
}