/* รอบ 57S: ร้านค้าโรงเรียน (/school/store) — prefix sto-
   ใช้คู่กับ fit.css (หน้าเดียวจบ) + แท็บ .sfe-tabs จาก school-fees.css
   ใช้เฉพาะตัวแปรสีใน :root (โหมดมืดทับให้เองใน dark.css) · มือถือ 390px ห้ามเลื่อนแนวนอน */

@media screen {
  .fit > .sto-tabs, .fit > .sto-hint { flex: none; }

  /* ---------- แถบตัวกรอง ---------- */
  .sto-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
  .sto-cats { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
  .sto-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; white-space: nowrap; }
  .sto-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
  .sto-dates { display: flex; gap: 10px; flex-wrap: wrap; }
  .sto-branch select, .sto-itemsel select { max-width: 240px; }
  .sto-hint { margin: 0; color: var(--muted); font-size: .88rem; }
  .sto-hint a { color: var(--brand-strong); font-weight: 600; }

  /* ---------- ตารางสินค้า ---------- */
  .sto-name { font-weight: 600; }
  .sto-unit { color: var(--muted); font-size: .85rem; font-weight: 400; }
  .sto-off {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: var(--chip); color: var(--muted); font-size: .75rem; font-weight: 600; vertical-align: middle;
  }
  .sto-row-off td { color: var(--muted); }
  .sto-sizes { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }
  .sto-sz {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 8px;
    background: var(--chip); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .sto-sz b { font-weight: 700; color: var(--ink); }
  .sto-sz-one { margin-left: 6px; }
  .sto-q-out { color: var(--danger); font-weight: 700; }
  .sto-q-low { color: var(--warn-text, #7a5300); font-weight: 700; }
  .sto-actions { white-space: nowrap; }
  .sto-actions .btn + .btn { margin-left: 4px; }

  /* ---------- ความเคลื่อนไหว ---------- */
  .sto-pos { color: var(--ok); }
  .sto-neg { color: var(--danger); }
  .sto-kind { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--chip); font-size: .82rem; font-weight: 600; white-space: nowrap; }
  .sto-kind.k-receive { background: var(--ok-soft); color: var(--ok); }
  .sto-kind.k-sale { background: var(--brand-soft); color: var(--brand-strong); }
  .sto-kind.k-adjust { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .sto-kind.k-void { background: var(--danger-soft); color: var(--danger); }
  .sto-wrap { white-space: normal; overflow-wrap: anywhere; max-width: 220px; }
  .sto-trunc { flex: none; margin: 0; }

  /* ---------- ฟอร์มสินค้า ---------- */
  .sto-form-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
  .sto-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .sto-price1 { max-width: 260px; }
  .sto-vrows { display: flex; flex-direction: column; gap: 6px; }
  .sto-vhead, .sto-vrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 52px 40px; gap: 8px; align-items: center; }
  .sto-vhead { color: var(--muted); font-size: .8rem; font-weight: 600; padding: 0 2px; }
  .sto-vrow input[type="text"], .sto-vrow input[type="number"] { width: 100%; min-width: 0; }
  .sto-vact { display: flex; justify-content: center; }
  .sto-vact input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
  .sto-vdel { font-size: 1.2rem; line-height: 1; padding: 4px 0; min-width: 0; width: 40px; }
  .sto-vtools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

  /* ---------- ฟอร์มรับเข้า/นับสต็อก ---------- */
  .sto-srows { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
  .sto-shead, .sto-srow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; align-items: center; }
  .sto-shead { color: var(--muted); font-size: .8rem; font-weight: 600; position: sticky; top: 0; background: var(--surface); padding: 2px 0; }
  .sto-srow { padding: 4px 0; border-bottom: 1px solid var(--line); }
  .sto-slabel { font-weight: 600; overflow-wrap: anywhere; }
  .sto-srow input { width: 100%; min-width: 0; }
  .sto-shead .num, .sto-srow .num { text-align: right; }
  .sto-sdiff { color: var(--muted); }
}

/* ---------- มือถือ ---------- */
@media (max-width: 760px) {
  .sto-bar { gap: 8px; }
  .sto-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .sto-cats::-webkit-scrollbar { display: none; }
  .sto-branch, .sto-itemsel { min-width: 0; }
  .sto-branch select, .sto-itemsel select { max-width: 100%; width: 100%; }
  .sto-dates { width: 100%; }
  .sto-dates .field.inline { flex: 1 1 140px; min-width: 0; }
  .sto-dates input { width: 100%; min-width: 0; }
  .sto-sizes { max-width: 70%; justify-content: flex-end; }
  .table.cards td.sto-sizes-cell { align-items: flex-start; }
  .table.cards td.sto-actions { flex-wrap: wrap; white-space: normal; gap: 6px; }
  .sto-actions .btn + .btn { margin-left: 0; }
  .sto-wrap { max-width: 70%; text-align: right; }
  .sto-form-row { grid-template-columns: minmax(0, 1fr); }
  .sto-vhead, .sto-vrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 40px 36px; gap: 6px; }
  .sto-vdel { width: 36px; }
  .sto-shead, .sto-srow { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .7fr); gap: 6px; }
  .sto-price1 { max-width: none; }
}