/* Polish layer — โหลดหลัง unified-theme ใช้ตัวแปรสีเดิมทั้งหมด จึงเปลี่ยนตามธีมในหลังบ้านอัตโนมัติ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* การ์ด: ยกตัวนุ่มๆ ตอน hover */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
@media (hover:hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-sm, 0 10px 30px rgba(15,23,42,.08)); } }

/* ปุ่ม */
.btn { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease; font-weight: 500; }
.btn:active { transform: scale(.97); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(var(--primary-rgb), .28); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border: 2px solid rgba(255,255,255,.55); border-top-color: #fff; border-radius: 50%; animation: pl-spin .7s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* โฟกัสชัดเจน (เข้าถึงง่าย) */
:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .45); outline-offset: 2px; border-radius: 6px; }

/* ฟอร์ม */
.form-control, .form-select { border-radius: var(--ui-radius-sm, 14px); transition: border-color .2s, box-shadow .2s; }
.form-control:focus, .form-select:focus { box-shadow: var(--ui-ring, 0 0 0 4px rgba(var(--primary-rgb), .13)); }

/* ตาราง */
.table > :not(caption) > * > * { padding-top: .8rem; padding-bottom: .8rem; }
.table thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.table-responsive { -webkit-overflow-scrolling: touch; border-radius: var(--ui-radius-sm, 14px); }

/* Badge/Alert */
.badge { font-weight: 500; padding: .45em .75em; border-radius: 999px; }
.alert { border-radius: var(--ui-radius-sm, 14px); border: 0; box-shadow: var(--ui-shadow-xs, none); }

/* Skeleton loading: ใส่ class="skeleton" บน element ที่รอข้อมูล */
.skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--primary) 8%, #e5e7eb); border-radius: 10px; color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: pl-shimmer 1.3s infinite; }
@keyframes pl-shimmer { to { transform: translateX(100%); } }

/* Reveal ตอนเลื่อน */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* SweetAlert ให้เข้าธีม */
.swal2-popup { border-radius: var(--ui-radius-lg, 24px) !important; font-family: inherit !important; }
.swal2-styled.swal2-confirm { background: var(--primary) !important; border-radius: 12px !important; }

/* ===== มือถือ ===== */
@media (max-width: 767.98px) {
  .btn, .form-control, .form-select { min-height: 44px; }           /* ขนาดแตะขั้นต่ำ */
  .form-control, .form-select { font-size: 16px; }                  /* กัน iOS ซูมตอนโฟกัส */
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .card { border-radius: var(--ui-radius-md, 18px); }
  .card-body { padding: 1rem; }
  h1, .h1 { font-size: 1.55rem; } h2, .h2 { font-size: 1.3rem; } h3, .h3 { font-size: 1.15rem; }
  .table { font-size: .88rem; }
  .modal-dialog { margin: .6rem; }
  .btn-group-responsive .btn, .d-grid-sm .btn { width: 100%; }
  .card:hover { transform: none; }
}
@media (max-width: 575.98px) {
  .swal2-popup { width: 92vw !important; padding: 1.2rem !important; }
  .table-responsive { margin-left: -2px; margin-right: -2px; }
}

/* ลดการเคลื่อนไหวตามการตั้งค่าเครื่อง */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}