/* Gcodai Studio — เครื่องมือแก้ไข: เลเยอร์ ล็อก เส้นบอกขนาด หน้าต่างแก้ไข G-code */

/* ---------- เลเยอร์ ---------- */
.layers-sec .section-title > svg { width: 15px; height: 15px; margin-right: 6px; color: var(--muted); }
.layer-list { display: flex; flex-direction: column; gap: 2px; }
.layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: max(11px, calc(13px - var(--fsd, 0px)));
  min-height: 32px;
}
.layer-item:hover { background: var(--panel-2); }
.layer-item.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.layer-item.off .name, .layer-item.off .tag { opacity: 0.5; text-decoration: line-through; }
.layer-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-item .tag { font-size: max(11px, calc(11.5px - var(--fsd, 0px))); color: var(--muted); white-space: nowrap; }
.layer-item .icon-btn { width: 24px; height: 24px; flex: none; }
.layer-item .icon-btn svg { width: 15px; height: 15px; }
.layer-item .icon-btn.on { color: var(--warn); }
.layer-sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.35); padding: 0; flex: none; cursor: pointer; }
.layer-move { gap: 8px; }
.layer-move .select { flex: 1; min-width: 0; }
.layers-sec .tiny svg { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- ล็อกในรายการชิ้นงาน ---------- */
.obj-item.locked .name { opacity: 0.65; }
.obj-item .icon-btn.lock-on { color: var(--warn); }
.obj-item .icon-btn.lock-off { opacity: 0; }
.obj-item:hover .icon-btn.lock-off, .obj-item .icon-btn.lock-off:focus-visible { opacity: 0.55; }

/* ---------- เส้นบอกขนาด ---------- */
.dim-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.dim-readout svg { width: 18px; height: 18px; color: var(--blue); align-self: center; }
.dim-readout b { font-size: max(11px, calc(22px - var(--fsd, 0px))); font-weight: 500; }
.dim-readout span { color: var(--muted); font-size: max(11px, calc(13px - var(--fsd, 0px))); }

/* ---------- แก้ไข G-code ---------- */
.badge-edit {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: #2b1a00;
  background: var(--warn);
  vertical-align: 1px;
  white-space: nowrap;
}
.file-row .meta b .badge-edit { margin-left: 6px; }
.gce-dialog { height: min(860px, calc((100dvh - 32px) / var(--uiz, 1))); }
.gce-dialog .dialog-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 12px 16px; overflow: hidden; }
.gce-dialog .dialog-foot { flex-wrap: wrap; }
.gce-dialog .dialog-foot .ghost-btn:first-child { margin-right: auto; }
.gce { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.gce-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.gce-find { display: flex; align-items: center; gap: 6px; }
.gce-find .input { width: 170px; height: 30px; }
.gce-goto .input { width: 76px; }
.gce-find .ghost-btn { height: 30px; padding: 0 10px; }
.gce-find .toggle { margin: 0; }
.gce-main {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 220px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f11;
}
.gce-gutter {
  position: relative;
  width: 64px;
  flex: none;
  overflow: hidden;
  background: #11171a;
  border-right: 1px solid #1f2a2f;
}
.gce-nums {
  position: absolute;
  top: 8px;
  left: 0;
  right: 8px;
  text-align: right;
  white-space: pre;
  font: 12.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #5d6c73;
  user-select: none;
}
.gce-nums b { color: #e8eef0; font-weight: 600; }
.gce-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: #9fe7c4;
  font: 12.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  overflow: auto;
  tab-size: 4;
}
.gce-text::selection { background: rgba(255, 176, 32, 0.45); color: #fff; }
.gce-status { display: flex; gap: 10px; align-items: center; font-size: max(11px, calc(12px - var(--fsd, 0px))); color: var(--muted); min-height: 20px; }
.gce-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.gce-stats > div {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: max(11px, calc(12.5px - var(--fsd, 0px)));
}
.gce-stats > div b { font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.gce-stats > div span { color: var(--muted); }
.gce-stats > div.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.gce-note { display: flex; gap: 8px; font-size: max(11px, calc(12.5px - var(--fsd, 0px))); line-height: 1.5; color: var(--muted); }
.gce-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--blue); }
.gce-note b { color: var(--text); font-weight: 500; }

@media (max-width: 720px) {
  .gce-find .input { width: 120px; }
  .gce-gutter { width: 48px; }
}

/* เมนูคลิกขวายาวเกินจอ: เลื่อนดูได้ (ไม่ล้นขอบบน) */
.menu-pop { max-height: calc((100dvh - 16px) / var(--uiz, 1)); overflow-y: auto; overscroll-behavior: contain; }
.obj-item.layer-off { opacity: 0.45; }
.gce-hl {
  position: absolute;
  top: 8px;
  left: 64px;
  right: 0;
  height: 18px;
  background: rgba(255, 176, 32, 0.22);
  border-left: 2px solid var(--warn);
  pointer-events: none;
}
.gce-text { position: relative; z-index: 1; }
@media (max-width: 720px) { .gce-hl { left: 48px; } }

/* ---------- ฟอนต์ของร้าน (userfontsui.js) ---------- */
.ufont-drop { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; border: 1.5px dashed var(--line); border-radius: var(--radius); cursor: pointer; background: var(--panel-2); }
.ufont-drop:hover, .ufont-drop:focus-visible, .ufont-drop.over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.ufont-drop > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.ufont-drop b { display: block; font-weight: 500; }
.ufont-drop small { color: var(--muted); font-size: max(11px, calc(12.5px - var(--fsd, 0px))); }
.ufont-list { display: grid; gap: 8px; }
.ufont-row { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ufont-row:hover { border-color: var(--accent); }
.ufont-pv { min-height: 40px; display: flex; align-items: center; overflow: hidden; }
.ufont-pv svg { height: 40px; max-width: 100%; }
/* ---------- ปรับแต่งรูปแบบไฟล์เครื่อง (postedit.js) ---------- */
.pe-bar { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.pe-bar .field.grow { flex: 1 1 240px; }
.pe-bar-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pe-bar-btns .ghost-btn:disabled { opacity: 0.45; pointer-events: none; }
.pe-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.pe-preview { position: sticky; top: 0; align-self: start; min-width: 0; }
.pe-preview .code-box { max-height: min(52vh, 480px); }
.pe-preview .chip svg { width: 14px; height: 14px; }
.pe-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 2px 0 10px; }
.pe-vars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pe-vars .chip { font: 12px ui-monospace, Menlo, monospace; padding: 3px 8px; }
.input.mono, textarea.input.mono { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea.pe-tpl { min-height: 76px; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.pe-smax { width: 90px; height: 28px; margin-left: 6px; }
.pe code { font: 12px ui-monospace, Menlo, monospace; }
@media (max-width: 760px) {
  .pe-grid { grid-template-columns: 1fr; }
  .pe-preview { position: static; }
}