body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin:0; padding:0; background:#f3f4f6; color:#111827;
}
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-card{
  background:#fff; padding:24px 28px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); width:320px;
}
.login-card h2{ margin-top:0; margin-bottom:16px; }

label{
  display:block;
  margin-top:8px;
  font-size:14px;
  color:#4b5563;
}

/* ปรับให้ input เต็มความกว้างแบบในภาพใหม่ */
input{
  width:100%;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid #d1d5db;
  margin-top:4px;
  box-sizing:border-box;
}

button{
  margin-top:0px; width:auto; padding:9px 10px;
  border-radius:999px; border:none; cursor:pointer;
  background:#ffffff; color:#000000; font-weight:600;
}
.muted{ font-size:12px; color:#6b7280; margin-top:8px; }

textarea{
  width:100%;
  border-radius:10px;
  cursor:pointer;
  border:1px solid #d1d5db;
  padding:8px 10px;
  box-sizing:border-box;
}

.navbar{
  background:#111827; color:#e5e7eb; padding:10px 16px;
  display:flex; gap:10px; align-items:center;
}
.navbar a{
  color:#e5e7eb; text-decoration:none; padding:6px 10px; border-radius:999px;
}
.navbar a.active{ background:#2563eb; }
.navbar .right{ margin-left:auto; }

.container{
  max-width:1100px;
  margin:16px auto;
  padding:0 16px;
}
.card{
  background:#fff; padding:16px 18px; border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,.04);
}
.row{
  display:flex;
  gap:40px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.col{
  flex:1 1 0;
  min-width:180px;
}

/* คอลัมน์ที่ขนาดตามเนื้อหา (ใช้กับปุ่ม Gen เลขที่) */
.col-auto{
  flex:0 0 auto;
}

/* กลุ่มฟอร์มให้เว้นระยะสวย ๆ */
.form-group{
  margin-bottom:10px;
}

/* เลเอาท์หัวกระดาษ */
.header-layout{
  align-items:flex-start;
}

/* ให้ฝั่งซ้ายกับขวาสัดส่วนใกล้เคียงกับภาพ (ซ้ายกว้างกว่านิดหน่อย) */
.header-left{
  flex:1.1;
}
.header-right{
  flex:1;
}

/* แถวเล็กภายใน header-right */
.small-gap{
  gap:8px;
  margin-bottom:6px;
}

/* ตารางรายการ */
.table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.table th,.table td{
  padding:6px 8px;
  border-bottom:1px solid #e5e7eb;
  font-size:13px;
}
.table th{
  background:#f9fafb;
  text-align:left;
}

.btn{
  padding:4px 8px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  border:1px solid #98dde9;
  background:#c6ecff;
}
.btn.login{background:#195ceb; color:#ffffff; font-weight:600; }
.btn.danger{ background:#fcfcfc; border-color:#dc2626; color:#b91c1c; }
.btn.ghost{ background:transparent; }

input[type="number"]{
  text-align:right;
}

/* dropdown supplier */
.dropdown-list {
  position:absolute;
  background:white;
  border:1px solid #cdd7e1;
  border-top:none;
  width:100%;
  max-height:240px;
  overflow-y:auto;
  z-index:9999;
  display:none;
}

.dropdown-item {
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid #eef2f6;
}

.dropdown-item:hover {
  background:#f3f6ff;
}

/* กล่องรูปแบบราคาให้เหมือนในภาพใหม่ */
.price-mode-card{
  margin-top:12px;
  padding:10px 12px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fafafa;
}
.price-mode-label{
  margin-top:0;
  margin-bottom:4px;
}

/* จัด radio แนวนอน */
.radio-inline {
  display:flex;
  align-items:center;
  gap:40px;
  white-space:nowrap;
}
.radio-inline label {
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}