/* =====================================================================
   รอบ 48: สินค้าชั่งน้ำหนัก / บาร์โค้ดตาชั่ง (โมดูล scale)
   - ตั้งค่าร้าน: .sc48-set, แผนภาพหลัก .sc48-digits (.p คำนำหน้า / .u PLU / .v ค่า / .c ตรวจสอบ), .sc48-test-res
   - สินค้า: .sc48-prod-box (ใช้โครง .lot-prod-box), .sc48-badge, .sc48-unit-hint
   - หน้าขาย: หน้าต่างใส่น้ำหนัก .wt-* (Components/WeightDialog.razor), ปุ่มน้ำหนักในตะกร้า .sc48-wt
   - พิมพ์ฉลาก: .sc48-lbl-ctl / .sc48-mode / .sc48-amt / .sc48-packdate, บนฉลาก .sc48-lblp-sub (จอ + พิมพ์)
   ===================================================================== */

@media screen {
  :root {
    --sc48-plu: #2457A6;
    --sc48-plu-soft: rgba(36, 87, 166, .12);
    --sc48-val: var(--ok);
    --sc48-val-soft: var(--ok-soft);
  }
  html[data-theme="dark"] {
    --sc48-plu: #8DB4F2;
    --sc48-plu-soft: rgba(141, 180, 242, .16);
  }

  /* ---------- ตั้งค่าร้าน ---------- */
  .sc48-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .sc48-warn { background: var(--warn-soft); color: var(--warn-text, #8A5A00); border: 1px solid rgba(176, 120, 0, .3); }

  .sc48-demo {
    display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm);
    background: var(--chip); border: 1px solid var(--line); min-width: 0;
  }
  .sc48-demo-title { margin: 0; font-size: .8rem; font-weight: 700; color: var(--muted); }
  .sc48-digits { display: flex; flex-wrap: nowrap; gap: 3px; max-width: 100%; }
  .sc48-d {
    flex: 1 1 0; min-width: 0; max-width: 30px; height: 34px; display: grid; place-items: center; border-radius: 7px;
    font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; border: 1px solid transparent;
  }
  .sc48-d.p { background: var(--brand-soft); color: var(--brand-strong, var(--brand)); border-color: rgba(var(--brand-rgb), .3); }
  .sc48-d.u { background: var(--sc48-plu-soft); color: var(--sc48-plu); border-color: var(--sc48-plu-soft); }
  .sc48-d.v { background: var(--sc48-val-soft); color: var(--sc48-val); border-color: rgba(28, 107, 58, .25); }
  .sc48-d.c { background: var(--surface); color: var(--muted); border-color: var(--line); border-style: dashed; }
  .sc48-d.u + .sc48-d.v, .sc48-d.p + .sc48-d.u, .sc48-d.v + .sc48-d.c { margin-left: 4px; }
  .sc48-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: var(--muted); }
  .sc48-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .sc48-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
  .sc48-legend .p::before { background: var(--brand); }
  .sc48-legend .u::before { background: var(--sc48-plu); }
  .sc48-legend .v::before { background: var(--sc48-val); }
  .sc48-legend .c::before { background: transparent; border: 1px dashed var(--muted); }
  .sc48-demo-read { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .sc48-demo p.muted { margin: 0; }
  .sc48-test { margin: 0; }
  .sc48-test input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .sc48-test-res { margin: 0; padding: 6px 10px; border-radius: 8px; font-weight: 600; overflow-wrap: anywhere; }
  .sc48-test-res.ok { background: var(--ok-soft); color: var(--ok); }
  .sc48-test-res.bad { background: var(--danger-soft); color: var(--danger); }

  /* ---------- สินค้า ---------- */
  .sc48-prod-box.is-locked { opacity: .7; }
  .sc48-prod-box.is-locked .lot-switch { cursor: not-allowed; }
  .sc48-prod-box .lot-shelf-row input { width: 110px; letter-spacing: .04em; }
  .sc48-unit-hint {
    flex: 1 1 100%; display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 7px 10px; border-radius: 8px;
    background: var(--surface); color: var(--muted); line-height: 1.4;
  }
  .sc48-unit-hint svg { flex: none; margin-top: 2px; color: var(--brand); }
  .sc48-badge { background: var(--sc48-plu-soft); color: var(--sc48-plu); }

  /* ---------- หน้าต่างใส่น้ำหนัก ---------- */
  .wt-dlg { display: flex; flex-direction: column; gap: 12px; width: min(420px, 100%); margin: 0 auto; }
  .wt-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .wt-prod-ico {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    background: var(--brand-soft); color: var(--brand);
  }
  .wt-prod-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .wt-prod-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-display {
    display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: var(--radius);
    border: 2px solid rgba(var(--brand-rgb), .35); background: var(--brand-tint); cursor: text;
  }
  .wt-display:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .wt-input {
    flex: 1 1 auto; min-width: 0; width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; font-size: 2.2rem !important; font-weight: 800; height: auto !important; text-align: right; color: var(--ink); outline: none;
  }
  .wt-unit { flex: none; font-size: 1.05rem; font-weight: 700; color: var(--muted); }
  .wt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
  .wt-total span { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wt-total strong { font-size: 1.35rem; color: var(--brand-strong, var(--brand)); white-space: nowrap; }
  .wt-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .wt-quick .chip { justify-content: center; min-height: 38px; padding: 0 6px; font-weight: 700; white-space: nowrap; }
  .wt-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wt-key {
    min-height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 1.3rem; font-weight: 700; font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  }
  .wt-key:active { background: var(--brand-soft); }
  .wt-key.del { color: var(--muted); }
  .wt-scale { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--line); }
  .wt-baud { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
  .wt-baud select {
    min-width: 104px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font-family: inherit; font-size: .9rem;
  }
  .wt-read-wrap { flex: 1 1 160px; display: flex; }
  .wt-read { flex: 1 1 auto; justify-content: center; gap: 6px; }
  .wt-error { margin: 0; }
  .wt-dlg .actions { margin-top: 2px; }

  /* ---------- ตะกร้า: รายการชั่ง ---------- */
  .sc48-line-sub { font-variant-numeric: tabular-nums; }
  .sc48-wt { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .sc48-wt-btn {
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border-radius: 12px;
    border: 1px solid rgba(var(--brand-rgb), .35); background: var(--brand-tint); color: var(--brand-strong, var(--brand));
    font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap;
  }
  .sc48-wt-btn:hover { background: var(--brand-soft); }
  .sc48-wt-x {
    width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
  }
  .sc48-wt-x:hover { color: var(--danger); border-color: var(--danger); }

  /* ---------- พิมพ์ฉลาก ---------- */
  .sc48-lbl-info { display: block; font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .sc48-lbl-ctl { flex-wrap: wrap; }
  .sc48-mode { display: inline-flex; flex: none; padding: 2px; border-radius: 10px; background: var(--chip); }
  .sc48-mode button {
    min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
    font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .sc48-mode button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .sc48-amt { flex: 0 1 110px; width: 110px; min-width: 70px; text-align: right; font-weight: 700; }
  .sc48-lbl-ctl .lbl-price { flex: 1 1 60px; font-weight: 700; color: var(--ink); }
  .sc48-packdate { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: .84rem; color: var(--muted); }
  .sc48-packdate input { min-width: 0; max-width: 170px; }
  html[data-theme="dark"] .sc48-mode button.on { background: var(--raised, var(--surface)); }

  @media (max-width: 760px) {
    .wt-key { min-height: 46px; }
    .wt-input { font-size: 1.9rem !important; }
    .sc48-d { height: 30px; font-size: .85rem; border-radius: 6px; }
    .sc48-d.u + .sc48-d.v, .sc48-d.p + .sc48-d.u, .sc48-d.v + .sc48-d.c { margin-left: 2px; }
    .sc48-digits { gap: 2px; }
    .sc48-amt { flex-basis: 90px; width: 90px; }
  }
}

/* ---------- บนตัวฉลาก (จอ + พิมพ์): ราคาต่อหน่วย + วันที่แพ็ก ---------- */
.sc48-lblp-sub {
  flex: none; display: flex; justify-content: space-between; gap: 1mm; font-size: 5.5pt; line-height: 1.1;
  white-space: nowrap; overflow: hidden;
}
.sc48-lblp-sub span { overflow: hidden; text-overflow: ellipsis; }
.sc48-lblp-sub span:empty { display: none; }
.sz-s .sc48-lblp-sub { font-size: 4.8pt; }
.sz-l .sc48-lblp-sub { font-size: 6.5pt; }

/* หัวหน้าสินค้า: มือถือเหลือปุ่ม PLU (CSV) ปุ่มเดียว */
@media screen and (max-width: 760px) {
  .sc48-plu-link + .sc48-plu-link { display: none; }
}