/**
 * buttons.css — ConnectAI Design System · Button Variant System
 * A5: Gap G-12 — สีปุ่มไม่มีระบบความหมาย (Semantic)
 *
 * Single source of truth — include on every page via:
 *   <link rel="stylesheet" href="css/buttons.css">
 * Do NOT redefine .btn-* in page <style> blocks.
 */

/* ── Base ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: 'Noto Sans Thai', system-ui, sans-serif;
  cursor: pointer; border: 1.5px solid transparent;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap; user-select: none; line-height: 1.4;
  text-decoration: none; vertical-align: middle;
}
.btn:focus-visible {
  outline: 2px solid #1677FF; outline-offset: 2px;
}
.btn:disabled, .btn[disabled] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.btn svg { flex-shrink: 0; }

/* ── Size variants ───────────────────────────────────────────────────────── */
.btn-xs { padding: 3px 10px;  font-size: 11.5px; border-radius: 6px; gap: 4px; }
.btn-sm { padding: 5px 12px;  font-size: 12.5px; border-radius: 7px; }
.btn-lg { padding: 11px 24px; font-size: 14.5px; border-radius: 9px; }

/* Icon-only (square) */
.btn-icon       { padding: 7px;  border-radius: 7px;  min-width: 0; }
.btn-icon.btn-xs { padding: 5px; border-radius: 6px; }
.btn-icon.btn-sm { padding: 6px; border-radius: 6px; }

/* ── Primary ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: #1677FF;
  color: #fff;
  border-color: #1677FF;
}
.btn-primary:hover:not(:disabled)  { background: #0958D9; border-color: #0958D9; }
.btn-primary:active:not(:disabled) { background: #003EB3; border-color: #003EB3; }

/* ── Secondary (outlined) ────────────────────────────────────────────────── */
.btn-secondary {
  background: #fff;
  color: #1677FF;
  border-color: #1677FF;
}
.btn-secondary:hover:not(:disabled)  { background: #E6F4FF; }
.btn-secondary:active:not(:disabled) { background: #BAE0FF; }

/* ── Ghost (tertiary) ────────────────────────────────────────────────────── */
.btn-ghost {
  background: #E6F4FF;
  color: #1677FF;
  border-color: #BAE0FF;
}
.btn-ghost:hover:not(:disabled)  { background: #BAE0FF; border-color: #91CAFF; }
.btn-ghost:active:not(:disabled) { background: #91CAFF; border-color: #69B1FF; }

/* ── Default (neutral) ───────────────────────────────────────────────────── */
.btn-default {
  background: #fff;
  color: #595959;
  border-color: #D9D9D9;
}
.btn-default:hover:not(:disabled)  { color: #1677FF; border-color: #1677FF; }
.btn-default:active:not(:disabled) { background: #F0F0F0; }

/* ── Danger ──────────────────────────────────────────────────────────────── */
.btn-danger {
  background: #FF4D4F;
  color: #fff;
  border-color: #FF4D4F;
}
.btn-danger:hover:not(:disabled)  { background: #CF1322; border-color: #CF1322; }
.btn-danger:active:not(:disabled) { background: #A8071A; border-color: #A8071A; }

/* Danger ghost (outline, for less destructive contexts) */
.btn-danger-ghost {
  background: #FFF1F0;
  color: #CF1322;
  border-color: #FFA39E;
}
.btn-danger-ghost:hover:not(:disabled)  { background: #FFA39E; border-color: #FF4D4F; }

/* ── Success ─────────────────────────────────────────────────────────────── */
.btn-success {
  background: #52C41A;
  color: #fff;
  border-color: #52C41A;
}
.btn-success:hover:not(:disabled)  { background: #389E0D; border-color: #389E0D; }
.btn-success:active:not(:disabled) { background: #237804; }

/* ── Warning (outline) ───────────────────────────────────────────────────── */
.btn-warning {
  background: #fff;
  color: #D46B08;
  border-color: #FA8C16;
}
.btn-warning:hover:not(:disabled)  { background: #FFF7E6; border-color: #D46B08; }
.btn-warning:active:not(:disabled) { background: #FFE7BA; }

/* ── Loading state ───────────────────────────────────────────────────────── */
.btn.loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn.loading::after {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: _btn-spin .6s linear infinite;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.btn-secondary.loading::after,
.btn-ghost.loading::after,
.btn-default.loading::after,
.btn-warning.loading::after {
  border-color: rgba(22,119,255,.25); border-top-color: #1677FF;
}
@keyframes _btn-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── RowActions wrapper ──────────────────────────────────────────────────── */
/* [A8] depends-on: this file — Row action buttons must use .btn-icon from here */
.row-actions {
  display: flex; gap: 4px; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap;
}
.ra-tooltip-wrap {
  position: relative; display: inline-flex;
}
.ra-tooltip-wrap .ra-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #fff;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 4px 9px; border-radius: 5px; pointer-events: none;
  opacity: 0; transition: opacity .12s; z-index: 9999;
}
.ra-tooltip-wrap:hover .ra-tip { opacity: 1; }

/* ── PageHeader layout ───────────────────────────────────────────────────── */
/* [A7] common margin only — flex direction is defined per-page */
.page-header { margin-bottom: 24px; }

/* ── Form field error state ──────────────────────────────────────────────── */
/* [A4] Inline error state — Gap G-16 */
.field-error { font-size: 12px; color: #CF1322; margin-top: 4px; display: none; }
.field-error.show { display: block; }
.input-wrap.has-error input,
.input-wrap.has-error select,
.input-wrap.has-error textarea,
input.has-error, select.has-error, textarea.has-error {
  border-color: #FF4D4F !important;
  box-shadow: 0 0 0 2px rgba(255,77,79,.12);
}