/**
 * modules/inventory/styles.css
 *
 * CSS เฉพาะของโมดูล inventory — ใช้คลาสมาตรฐานของเฟรมเวิร์กเป็นหลัก
 * ที่เพิ่มมีเท่าที่ไม่มีของเดิมให้ใช้ และตั้ง prefix ชื่อโมดูลกันชนกับโมดูลอื่น
 */

/* แถบแท็บของหน้าสินค้า (ภาพรวม/สินค้า/บาร์โค้ด/รายละเอียดอื่นๆ/สต๊อก) */
.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  padding: 0 var(--space-3, 12px);
  border-bottom: 1px solid var(--border-color, #ddd);
}

.inventory-tabs .inventory-tab {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  color: var(--text-color, inherit);
  text-decoration: none;
  white-space: nowrap;
}

.inventory-tabs .inventory-tab:hover {
  background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}

.inventory-tabs .inventory-tab.active {
  background: var(--card-bg, #fff);
  border-color: var(--border-color, #ddd);
  font-weight: 600;
  margin-bottom: -1px;
}

/* รูปบาร์โค้ดในตารางรหัสสินค้า — ห้ามให้ถูกย่อจนอ่านไม่ออก */
.inventory-barcode {
  max-width: none;
  height: 30px;
  display: block;
}

/* การ์ดสรุปของหน้าภาพรวม */
.inventory-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}

.inventory-chart {
  min-height: 280px;
  margin-bottom: var(--space-3, 12px);
}

/* ---- สมุดบัญชีสต๊อกและชั้นต้นทุน ---- */

/* ของเข้า/ของออก ต้องแยกออกจากกันด้วยสายตา ไม่ใช่ต้องอ่านเครื่องหมายทีละแถว */
.ledger-in {
  color: var(--color-success);
}
.ledger-out {
  color: var(--color-error);
}

/* ชั้นต้นทุนที่ถูกตัดหมดแล้ว — ยังต้องเห็น (เป็นหลักฐาน) แต่ต้องไม่เด่นเท่าชั้นที่ยังมีของ */
.layer-closed {
  color: var(--color-text-muted, var(--color-comment));
  text-decoration: line-through;
}