/* =====================================================================
   ปุ่มนูน (raised buttons) — ชุดเดียวใช้ทั้งแอป
   วางไฟล์นี้ไว้ข้าง index.html แล้วใส่ <link rel="stylesheet" href="buttons.css">
   ไว้ "หลัง" <style> เดิมใน <head> (ต้องอยู่หลังถึงจะทับ .btn เดิม)
   ปรับหน้าตาทั้งแอปได้ที่ตัวแปร --bt-* ด้านล่างที่เดียว
   ===================================================================== */
:root{
  --bt-radius:12px;
  --bt-lift:0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(23,52,4,.10) inset, 0 1px 2px rgba(23,52,4,.20), 0 5px 12px rgba(23,52,4,.12);
  --bt-lift-hover:0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(23,52,4,.10) inset, 0 2px 4px rgba(23,52,4,.22), 0 9px 18px rgba(23,52,4,.16);
  --bt-press:0 2px 5px rgba(23,52,4,.28) inset, 0 1px 0 rgba(255,255,255,.6);
}

.btn{
  border:0; border-radius:var(--bt-radius); padding:10px 18px; font-weight:700; letter-spacing:.1px;
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%); color:var(--brand);
  box-shadow:var(--bt-lift);
  transition:transform .1s ease, box-shadow .14s ease, filter .15s ease, background .15s ease;
  user-select:none;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--bt-lift-hover); }
.btn:active{ transform:translateY(1px) scale(.985); box-shadow:var(--bt-press); filter:brightness(.97); }
.btn:focus-visible{ outline:3px solid rgba(99,153,34,.45); outline-offset:2px; }
.btn:disabled{ opacity:.5; transform:none; box-shadow:none; filter:grayscale(.3); }

/* ปุ่มหลัก */
.btn-p,.btn-ok{
  background:linear-gradient(180deg,var(--brand-3) 0%,var(--brand-2) 100%); color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 -3px 0 rgba(0,0,0,.20) inset, 0 2px 3px rgba(23,52,4,.30), 0 8px 16px rgba(39,80,10,.25);
}
.btn-p:hover,.btn-ok:hover{
  background:linear-gradient(180deg,var(--brand-3) 0%,var(--brand-2) 100%); filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 -3px 0 rgba(0,0,0,.20) inset, 0 3px 5px rgba(23,52,4,.32), 0 12px 22px rgba(39,80,10,.28);
}
.btn-p:active,.btn-ok:active{ box-shadow:0 3px 6px rgba(0,0,0,.35) inset, 0 1px 0 rgba(255,255,255,.2); filter:brightness(.95); }

/* ปุ่มอันตราย */
.btn-bad{
  background:linear-gradient(180deg,#fff 0%,#FBDADA 100%); color:var(--bad);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 -2px 0 rgba(192,57,43,.16) inset, 0 1px 2px rgba(192,57,43,.25), 0 5px 12px rgba(192,57,43,.12);
}

/* ปุ่มจาง: ไม่นูน (ใช้กับ "ยกเลิก") */
.btn-ghost{ background:transparent; box-shadow:none; color:var(--muted); }
.btn-ghost:hover{ background:rgba(23,52,4,.06); box-shadow:none; transform:none; }
.btn-ghost:active{ box-shadow:none; transform:scale(.98); }

/* ขนาดเล็ก / ปุ่มเลื่อนเดือน / ปุ่มบวกลบ */
.btn-sm{ padding:6px 12px; font-size:13px; border-radius:10px; }
.mnav .btn{ border-radius:12px; }
.btn.stp{ border-radius:12px; }

/* แท็บล่าง/บน: ปุ่มที่เลือกอยู่ให้ดูเหมือนกดลง */
nav button.on .ico{ box-shadow:0 2px 5px rgba(23,52,4,.18) inset; }

/* กำลังบันทึก: ลดการกดซ้ำ */
body.busy .btn:not(.btn-ghost){ cursor:progress; }

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{ transition:none; transform:none; }
}