/* รอบ 37: ราคาหลายระดับ — หน้าตั้งราคา (/price-tiers) + ป้ายระดับราคาในหน้าลูกค้า
   - สีของแต่ละระดับมาจากตัวแปร --tier (ตั้งที่ style ของการ์ด/คอลัมน์/ป้าย)
   - สีอื่นใช้ตัวแปรของธีม จึงใช้กับโหมดมืดได้ (กรณีพิเศษอยู่ท้ายไฟล์)
   - โครงหน้าใช้ .fit ของ fit.css: หัว + แถบระดับราคา + ตัวกรอง อยู่กับที่ ตารางเลื่อนในกรอบ แถบบันทึกติดล่าง */

@media screen {
  /* ---------- ชิ้นส่วนร่วม ---------- */
  .pt-dot {
    flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--tier, var(--muted));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier, var(--muted)) 24%, transparent);
  }
  .pt-tag {
    display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px;
    background: var(--chip); color: var(--muted); font-size: .72rem; font-weight: 600; white-space: nowrap;
  }
  .pt-tag.ok { background: var(--ok-soft); color: var(--ok); }
  .pt-badge {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle;
    margin-left: 6px; padding: 1px 9px 1px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--tier, var(--muted)) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier, var(--muted)) 32%, transparent);
    color: var(--ink); font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  }
  .pt-badge .pt-dot { width: 7px; height: 7px; box-shadow: none; }
  .pt-warn { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .pt-hint { margin: 0; line-height: 1.5; }

  /* ---------- หัวหน้า ---------- */
  .pt-tools .pt-search { width: 300px; }
  .pt-cat {
    min-height: 42px; max-width: 200px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 12px;
    background-color: var(--surface); color: var(--ink); font: inherit; font-size: .92rem;
  }
  .pt-cat:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .pt-bulk-btn, .pt-add-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }

  /* ---------- แถบระดับราคา ---------- */
  .pt-tiers {
    flex: none; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; margin: -2px -2px -6px;
    scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  .pt-tier {
    position: relative; flex: 0 0 auto; min-width: 200px; max-width: 300px; display: flex; flex-direction: column; gap: 4px;
    padding: 8px 6px 6px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
    border: 1px solid var(--line); overflow: hidden;
  }
  .pt-tier::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tier, var(--muted)); }
  .pt-tier.off { opacity: .62; border-style: dashed; box-shadow: none; }
  .pt-tier.off::before { opacity: .5; }
  .pt-tier-top { display: flex; align-items: center; gap: 8px; padding-right: 6px; min-width: 0; }
  .pt-tier-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; }
  .pt-tier-pct {
    flex: none; padding: 0 7px; border-radius: 8px; font-size: .76rem; font-weight: 700;
    background: color-mix(in srgb, var(--tier, var(--muted)) 14%, transparent); color: var(--ink); white-space: nowrap;
  }
  .pt-tier-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 10px; white-space: nowrap; color: var(--muted); font-size: .8rem; }
  .pt-tier-n { display: inline-flex; align-items: center; gap: 4px; }
  .pt-tier-n b { color: var(--ink); font-weight: 700; }
  .pt-tier-acts { margin-left: auto; display: flex; gap: 0; }
  .pt-tier-acts .icon-btn, .pt-brk-row .icon-btn { border: 0; background: transparent; }
  .pt-tier-acts .icon-btn { width: 30px; height: 30px; min-height: 30px; padding: 0; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
  .pt-tier-acts .icon-btn:hover { color: var(--ink); }
  .pt-del-btn:hover { color: var(--danger) !important; background: var(--danger-soft) !important; }
  .pt-tier-add {
    flex: 0 0 auto; min-width: 140px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
    background: var(--brand-tint); color: var(--brand-strong, var(--brand)); font: inherit; font-weight: 600; cursor: pointer;
  }
  .pt-tier-add:hover:not(:disabled) { background: var(--brand-soft); }
  .pt-tier-add:disabled { opacity: .5; cursor: not-allowed; }

  /* ---------- เริ่มต้น (ยังไม่มีระดับ) ---------- */
  .pt-start {
    flex: none; display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap;
    padding: 18px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  }
  .pt-start-ico { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); }
  .pt-start-text { flex: 1 1 280px; min-width: 0; }
  .pt-start-text h2 { margin: 0 0 4px; font-size: 1.1rem; }
  .pt-start-text p { margin: 0; line-height: 1.55; }
  .pt-start-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .pt-preset {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--tier) 40%, var(--line)); background: color-mix(in srgb, var(--tier) 9%, var(--surface));
    color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  .pt-preset small { color: var(--muted); font-weight: 700; }
  .pt-preset:hover:not(:disabled) { border-color: var(--tier); }
  .pt-preset:disabled { opacity: .55; cursor: wait; }

  /* ---------- ตัวกรอง ---------- */
  .pt-bar { gap: 8px 16px; }
  .pt-chip-warn:not(.on) .fitc-n { color: var(--danger); }
  .pt-chip-dirty:not(.on) { border-color: var(--brand); color: var(--brand-strong, var(--brand)); }
  .pt-legend { flex: none; display: flex; gap: 14px; margin: 0; white-space: nowrap; }
  .pt-leg { display: inline-flex; align-items: center; gap: 6px; }
  .pt-leg::before { content: ""; width: 22px; height: 14px; border-radius: 5px; border: 1px dashed var(--line); background: var(--surface); }
  .pt-leg-below::before { border: 1px solid var(--danger); background: var(--danger-soft); }

  /* ---------- ตาราง ---------- */
  .pt-table th.pt-c-tier { box-shadow: inset 0 -1px 0 var(--line), inset 0 3px 0 var(--tier, var(--muted)); vertical-align: bottom; }
  .pt-th { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
  .pt-th-pct { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; }
  .pt-table td { padding-top: 7px; padding-bottom: 7px; }
  .pt-c-prod { min-width: 220px; }
  .pt-prod { display: block; font-weight: 600; line-height: 1.35; }
  .pt-prod-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 1px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
  .pt-unit { color: var(--ink); font-weight: 600; }
  .pt-prod-cat { padding: 0 6px; border-radius: 6px; background: var(--chip); }
  .pt-c-num { white-space: nowrap; }
  .pt-c-cost { color: var(--muted); }
  .pt-c-cost.below { color: var(--danger); font-weight: 700; }
  .pt-c-tier { width: 150px; min-width: 132px; }
  .pt-table .pt-in {
    width: 100%; min-width: 0; max-width: 150px; min-height: 38px; padding: 6px 10px; text-align: right;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .pt-table .pt-in::placeholder { color: var(--muted); opacity: .78; font-weight: 400; font-size: .84rem; }
  .pt-table .pt-in:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .pt-c-tier.fb .pt-in { border-style: dashed; background: transparent; }
  .pt-c-tier.set .pt-in { border-color: color-mix(in srgb, var(--tier, var(--muted)) 55%, var(--line)); background: color-mix(in srgb, var(--tier, var(--muted)) 6%, var(--surface)); }
  .pt-c-tier.changed .pt-in { border-color: var(--brand); border-style: solid; background: var(--brand-tint); }
  .pt-c-tier.below .pt-in { border-color: var(--danger); border-style: solid; background: var(--danger-soft); color: var(--danger); }
  .pt-c-tier.below.fb .pt-in::placeholder { color: var(--danger); opacity: 1; }
  .pt-row.dirty td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
  .pt-c-brk { width: 1%; white-space: nowrap; }
  .pt-brk-btn {
    display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px; border-radius: 999px;
    border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .pt-brk-btn:hover { border-color: var(--brand); color: var(--brand-strong, var(--brand)); }
  .pt-brk-btn.has { border-style: solid; border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-tint); color: var(--brand-strong, var(--brand)); }
  .pt-brk-btn.below { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
  .pt-more { display: flex; justify-content: center; padding: 12px; }
  .pt-limit { margin: 0; padding: 0 14px 12px; text-align: center; }
  .pt-empty { padding: 32px 16px; text-align: center; }
  .pt-empty p { margin: 0 0 10px; }

  /* ---------- แถบบันทึก ---------- */
  .pt-savebar {
    flex: none; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
    padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-lg);
    animation: pt-rise .16s ease-out;
  }
  .pt-save-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
  .pt-save-text b {
    min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
    background: var(--brand); color: var(--brand-ink, #fff); font-size: .86rem;
  }
  .pt-save-warn { padding: 2px 10px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-size: .82rem; font-weight: 600; }
  .pt-save-acts { margin-left: auto; display: flex; gap: 8px; }
  @keyframes pt-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---------- ฟอร์มระดับราคา ---------- */
  .pt-tprev {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
    background: color-mix(in srgb, var(--tier, var(--muted)) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tier, var(--muted)) 35%, var(--line));
  }
  .pt-tprev .num { color: var(--muted); font-weight: 700; font-size: .86rem; }
  .pt-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pt-swatch {
    width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 3px solid var(--surface); cursor: pointer;
    background: var(--tier); box-shadow: 0 0 0 1px var(--line);
  }
  .pt-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
  .pt-color-input { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
  .pt-tgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
  .pt-pct-box { position: relative; display: block; }
  .pt-pct-box input { width: 100%; padding-right: 34px !important; text-align: right; }
  .pt-pct-box b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
  .pt-check { align-items: flex-start; line-height: 1.4; }
  .pt-check input { margin-top: 2px; flex: none; }
  .pt-check strong { font-weight: 600; color: var(--ink); }

  /* ---------- ลบ ---------- */
  .pt-del-lead { margin: 0; font-weight: 600; }
  .pt-del-list { margin: 0; padding: 10px 12px 10px 30px; border-radius: 12px; background: var(--danger-soft); line-height: 1.7; }
  .pt-del-list li::marker { color: var(--danger); }

  /* ---------- ราคาตามจำนวน ---------- */
  .pt-brk-unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--chip); }
  .pt-brk-base { flex-basis: 100%; color: var(--muted); font-size: .84rem; }
  .pt-brk-empty { margin: 0; text-align: center; padding: 6px; }
  .pt-brk-list { display: flex; flex-direction: column; gap: 8px; }
  .pt-brk-head, .pt-brk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 36px; gap: 10px; align-items: start; }
  .pt-brk-head { padding: 0 2px; }
  .pt-brk-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pt-brk-lbl { display: none; }
  .pt-brk-cell input {
    width: 100%; min-height: 42px; padding: 8px 10px; text-align: right; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  }
  .pt-brk-cell input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .pt-brk-in { position: relative; display: block; }
  .pt-brk-in b { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
  .pt-brk-in input { padding-left: 28px; }
  .pt-brk-save { color: var(--ok); font-size: .76rem; font-weight: 600; text-align: right; }
  .pt-brk-row.below .pt-brk-cell:nth-child(2) input { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
  .pt-brk-row.below .pt-brk-save { color: var(--danger); }
  .pt-brk-row .icon-btn { width: 36px; height: 42px; display: grid; place-items: center; color: var(--muted); border-radius: 10px; }
  .pt-brk-addbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- ตั้งราคาแบบเหมา ---------- */
  .pt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); }
  .pt-seg button {
    min-height: 40px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  }
  .pt-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .pt-bulk-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-tint); color: var(--ink); line-height: 1.5; font-size: .9rem; }
  .pt-bulk-sum.danger { background: var(--danger-soft); color: var(--danger); }

  /* ---------- หน้าลูกค้า ---------- */
  .pt-cchip { display: inline-flex; align-items: center; gap: 6px; }
  .pt-cchip .pt-dot { width: 8px; height: 8px; }
  .pt-cchip.on .pt-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
  .pt-cro { display: flex; align-items: center; min-height: 42px; }
  .pt-cro .pt-badge { margin-left: 0; font-size: .86rem; padding: 4px 12px 4px 10px; }
}

/* ---------- จอคอม: ทั้งหน้าพอดีจอ ---------- */
@media screen and (min-width: 1025px) {
  .pt-fit > .pt-tiers, .pt-fit > .pt-start, .pt-fit > .pt-savebar { flex: none; }
  .pt-scroll .pt-table thead th { white-space: nowrap; }
}

/* ---------- จอเล็กกว่า 1440: ซ่อนคำอธิบายสี (ดูได้จาก tooltip) ---------- */
@media screen and (max-width: 1439px) {
  .pt-legend { display: none; }
}

/* ---------- มือถือ ---------- */
@media screen and (max-width: 760px) {
  .pt-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: 8px; }
  .pt-tools .pt-search { grid-column: 1 / -1; width: 100%; }
  .pt-tools .pt-cat { max-width: none; width: 100%; }
  .pt-tools .fit-count { display: none; }
  .pt-bulk-btn { padding: 0 12px; }
  .pt-tools { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pt-add-btn { padding: 0 12px; }
  .pt-add-btn span, .pt-bulk-btn span { display: none; }

  .pt-tiers { margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
  .pt-tiers::-webkit-scrollbar { display: none; }
  .pt-tier { min-width: 190px; scroll-snap-align: start; }
  .pt-tier-add { min-width: 120px; }

  .pt-start { padding: 16px; }
  .pt-start-ico { width: 46px; height: 46px; }
  .pt-start-acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .pt-start-acts .btn { width: 100%; }

  /* การ์ดต่อหน่วย: ช่องราคาแต่ละระดับเรียงลงมา */
  .pt-table.cards tr { padding: 12px 14px 10px; }
  .pt-table.cards td.pt-c-prod { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line) !important; }
  .pt-table.cards td { min-height: 34px; }
  .pt-table.cards td.pt-c-tier { width: 100%; padding: 4px 0; }
  .pt-table.cards td.pt-c-tier::before {
    display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600;
    padding-left: 8px; border-left: 3px solid var(--tier, var(--muted)); line-height: 1.2;
  }
  .pt-table.cards .pt-in { width: 56%; max-width: 200px; min-height: 42px; font-size: 16px; }
  .pt-table.cards td.pt-c-brk { width: 100%; padding-top: 6px; }
  .pt-table.cards td.pt-c-num strong { font-weight: 700; }
  .pt-row.dirty { border-color: var(--brand) !important; box-shadow: inset 3px 0 0 var(--brand); }
  .pt-row.dirty td:first-child { box-shadow: none; }

  .pt-savebar {
    position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 15;
    gap: 8px 10px; padding: 10px 12px;
  }
  .pt-save-acts { width: 100%; margin-left: 0; }
  .pt-save-acts .btn { flex: 1; min-height: 46px; }

  .pt-brk-head { display: none; }
  .pt-brk-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding: 8px 0; border-top: 1px solid var(--line); }
  .pt-brk-row:first-of-type { border-top: 0; }
  .pt-brk-lbl { display: block; color: var(--muted); font-size: .76rem; }
  .pt-brk-row .icon-btn { margin-top: 18px; }
  .pt-tgrid { grid-template-columns: 1fr 1fr; }
}

/* ---------- โหมดมืด ---------- */
@media screen {
  html[data-theme="dark"] .pt-cchip.on .pt-dot { box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
  html[data-theme="dark"] .pt-tag.ok { color: var(--ok); }
  /* dark.css ทาสีช่องในตารางทั้งหมด (.table input) → ใส่สถานะของช่องราคาซ้ำให้ชนะ */
  html[data-theme="dark"] .pt-table .pt-c-tier.fb .pt-in { background: transparent; border-style: dashed; }
  html[data-theme="dark"] .pt-table .pt-c-tier.set .pt-in { border-color: color-mix(in srgb, var(--tier, var(--muted)) 60%, var(--line)); background: color-mix(in srgb, var(--tier, var(--muted)) 12%, var(--field)); }
  html[data-theme="dark"] .pt-table .pt-c-tier.changed .pt-in { border-color: var(--brand-line, var(--brand)); border-style: solid; background: var(--brand-tint); }
  html[data-theme="dark"] .pt-table .pt-c-tier.below .pt-in { border-color: var(--danger); border-style: solid; background: var(--danger-soft); color: var(--danger); }
  html[data-theme="dark"] .pt-table .pt-in:focus { border-color: var(--brand-line, var(--brand)); }
}