/* ============================================================================
   btn_search_theme.css v2 — ธีมปุ่มกลางของ GEOPLOTS (ใช้ร่วมทุกหน้า)
   ----------------------------------------------------------------------------
   อัปเดต: 2026-11-05 (UI Consistency Program — Phase 2)
   "ห้ามสร้าง class ปุ่มใหม่ในหน้า individual — ใช้ชุดกลางในไฟล์นี้เท่านั้น"
   กติกา (รายละเอียดใน docs/UI_STANDARD.md):
   · Primary action (ค้นหา/บันทึก/ยืนยัน/ดำเนินการหลัก)
     → .btn .btn-search .btn-search-primary  (emerald gradient · สูง 38px · radius 6px)
     · class เดิม .btn-primary / .btn-success / .btn-exec-search ถูก map มาชุดนี้อัตโนมัติ
   · Secondary (ยกเลิก/ปิด)  → .btn-secondary (slate ทึบ) / .btn-gray
   · ล้างค่าตัวกรอง          → .btn-search-reset (ขาว ขอบ slate)
   · Danger (ลบ/ปิดสิทธิ์)    → .btn-danger (ชุดสีเดียว #d32f2f)
   · ปุ่มในแถวตาราง          → .btn-table-action (สูง 28px · radius 6px)
   · ปุ่มเครื่องมือ/ดรอปดาวน์  → .btn-action-tool (ขาว ขอบ slate)
   · ปุ่มส่งออก Excel        → .btn-exec-excel (เขียว Excel #107c41)
   ค่ามาตรฐานอ้างอิง geoplots_tokens.css — ทุก var() มี fallback ครบ
   ============================================================================ */

/* ============ 1) ปุ่ม action หลัก (ชื่อ class มาตรฐาน) ============ */
.btn-search {
  height: var(--gp-btn-height, 38px);
  border-radius: var(--gp-radius-sm, 6px);
  font-weight: 600;
  font-size: var(--gp-text-base, 0.875rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-search:hover {
  transform: translateY(-1px);
  box-shadow: var(--gp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.btn-search-primary {
  background: var(--gp-action-gradient, linear-gradient(135deg, #10b981 0%, #047857 100%)) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}

.btn-search-primary:hover,
.btn-search-primary:focus,
.btn-search-primary:active {
  background: var(--gp-action-gradient-hover, linear-gradient(135deg, #059669 0%, #064e3b 100%)) !important;
  color: #ffffff !important;
}

/* Variant ปุ่มค้นหาขนาดเล็ก (เช่น ช่องค้นหาใน legend ของแผนที่) */
.btn-search-sm {
  height: var(--gp-btn-height-sm, 26px);
  font-size: var(--gp-text-sm, 12px);
  padding: 2px 10px;
  border-radius: var(--gp-radius-sm, 6px);
}

/* Variant ปุ่มล้างตัวกรอง (reset) */
.btn-search-reset {
  background: #f8fafc !important;
  border: 1px solid var(--gp-border, #e2e8f0) !important;
  color: var(--gp-text-muted, #64748b) !important;
}

.btn-search-reset:hover,
.btn-search-reset:focus,
.btn-search-reset:active {
  background: var(--gp-bg-muted, #f1f5f9) !important;
  border: 1px solid var(--gp-border, #e2e8f0) !important;
  color: var(--gp-text-main, #0f172a) !important;
}


/* ============ 2) Map class Bootstrap / class เดิม → มาตรฐานกลาง ============ */

/* ---------- 2.1 Primary: .btn-primary / .btn-success / .btn-exec-search ---------- */
.btn-primary,
.btn-success,
.btn-exec-search {
  background: var(--gp-action-gradient, linear-gradient(135deg, #10b981 0%, #047857 100%)) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 600;
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-exec-search:hover, .btn-exec-search:focus, .btn-exec-search:active {
  background: var(--gp-action-gradient-hover, linear-gradient(135deg, #059669 0%, #064e3b 100%)) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--gp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* ---------- 2.2 ปุ่มส่งออก Excel — เขียว Excel (ค่าคงที่ตามแบรนด์ Excel) ---------- */
.btn-exec-excel {
  background: #107c41 !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: var(--gp-radius-sm, 6px);
  padding: 7px 18px;
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-exec-excel:hover,
.btn-exec-excel:focus,
.btn-exec-excel:active {
  background: #0b5e31 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: var(--gp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* ---------- 2.3 Secondary: .btn-secondary / .btn-gray → slate ทึบ ---------- */
.btn-secondary,
.btn-gray {
  background: var(--gp-text-muted, #64748b) !important;
  border: 1px solid var(--gp-text-muted, #64748b) !important;
  color: #ffffff !important;
  border-radius: var(--gp-radius-sm, 6px);
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-gray:hover, .btn-gray:focus, .btn-gray:active {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ---------- 2.4 Danger: ชุดสีเดียวทั้งโปรเจค ---------- */
/*    (.btn-red / .btn-close-layers = ปุ่มไอคอนวงกลม ขนาด/ตำแหน่งคุมที่ CSS ของหน้านั้น) */
.btn-danger,
.btn-state-danger,
.btn-red,
.btn-close-layers {
  background-color: var(--gp-danger, #d32f2f) !important;
  border-color: var(--gp-danger, #d32f2f) !important;
  color: #ffffff !important;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-state-danger:hover,
.btn-red:hover, .btn-close-layers:hover {
  background-color: var(--gp-danger-hover, #b71c1c) !important;
  border-color: var(--gp-danger-hover, #b71c1c) !important;
  color: #ffffff !important;
}



/* ---------- 2.5 Info / Warning แบบทึบ ---------- */
.btn-info {
  background-color: var(--gp-info, #0284c7) !important;
  border-color: var(--gp-info, #0284c7) !important;
  color: #ffffff !important;
}

.btn-warning {
  background-color: var(--gp-warn, #d97706) !important;
  border-color: var(--gp-warn, #d97706) !important;
  color: #ffffff !important;
}

/* ---------- 2.6 ตระกูล Outline (ไม่แตะ .btn-outline-light / .btn-outline-dark) ---------- */
.btn-outline-primary,
.btn-outline-success {
  color: var(--gp-primary, #2e7d32) !important;
  border-color: var(--gp-primary, #2e7d32) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
  background-color: var(--gp-primary, #2e7d32) !important;
  border-color: var(--gp-primary, #2e7d32) !important;
  color: #ffffff !important;
}

.btn-outline-secondary {
  color: var(--gp-text-muted, #64748b) !important;
  border-color: var(--gp-border-strong, #cbd5e1) !important;
  background: #ffffff !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  background: var(--gp-bg-muted, #f1f5f9) !important;
  border-color: var(--gp-border-strong, #cbd5e1) !important;
  color: var(--gp-text-main, #0f172a) !important;
}

.btn-outline-danger {
  color: var(--gp-danger, #d32f2f) !important;
  border-color: var(--gp-danger, #d32f2f) !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
  background-color: var(--gp-danger, #d32f2f) !important;
  color: #ffffff !important;
}

.btn-outline-info {
  color: var(--gp-info, #0284c7) !important;
  border-color: var(--gp-info, #0284c7) !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  background-color: var(--gp-info, #0284c7) !important;
  color: #ffffff !important;
}

.btn-outline-warning {
  color: var(--gp-warn, #d97706) !important;
  border-color: var(--gp-warn, #d97706) !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
  background-color: var(--gp-warn, #d97706) !important;
  color: #ffffff !important;
}

/* ============ 3) ปุ่มในแถวตาราง — มาตรฐานเดียวทั้งโปรเจค ============ */
.btn-table-action {
  padding: 4px 10px;
  min-height: var(--gp-btn-height-table, 28px);
  border-radius: var(--gp-radius-sm, 6px);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-table-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-state-skipping {
  background-color: var(--gp-warn, #d97706) !important;
  color: #ffffff !important;
}

/* ============ 4) ปุ่มเครื่องมือ / ดรอปดาวน์ (ขาว ขอบ slate) ============ */
.btn-action-tool {
  background: #ffffff;
  border: 1px solid var(--gp-border, #e2e8f0);
  color: var(--gp-text-secondary, #334155);
  border-radius: var(--gp-radius-sm, 6px);
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--gp-transition, all 0.2s ease);
}

.btn-action-tool:hover {
  background: var(--gp-bg-body, #f8fafc);
  border-color: var(--gp-border-strong, #cbd5e1);
  color: var(--gp-text-main, #0f172a);
  transform: translateY(-1px);
}

/* ============ 5) ฟอร์ม — รัศมีมุมมาตรฐานเดียว (ไม่ใส่ !important
      เพื่อให้หน้าที่ตั้งใจทำ input ทรงพิเศษ เช่น pill ยังทำงานได้) ============ */
.form-control,
.form-select {
  border-radius: var(--gp-radius-sm, 6px);
}