/* คลาสปุ่ม/ฟอร์ม/การ์ด ที่ใช้ร่วมกันทั้งระบบ (ไม่พึ่ง @apply เพื่อให้ใช้ได้กับ Tailwind CDN) */
.btn,.btn-ghost,.btn-danger,.btn-sm{display:inline-flex;align-items:center;gap:.4rem;border-radius:.5rem;padding:.45rem .9rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:.15s;border:1px solid transparent;line-height:1.25}
.btn{background:#3b82f6;color:#fff}.btn:hover{background:#2563eb}
.btn-ghost{background:transparent;border-color:#cbd5e1;color:inherit}.btn-ghost:hover{background:rgba(148,163,184,.15)}
.dark .btn-ghost{border-color:#475569}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-sm{padding:.25rem .6rem;font-size:.8rem}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem}
.dark .card{background:#1e293b;border-color:#334155}
.inp{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;padding:.45rem .7rem;font-size:.875rem;background:#fff;color:inherit}
.inp:focus{outline:2px solid #93c5fd;border-color:#3b82f6}
.dark .inp{background:#0f172a;border-color:#475569}
.lbl{display:block;font-size:.8rem;font-weight:500;margin-bottom:.25rem;color:#475569}.dark .lbl{color:#cbd5e1}
.err{color:#dc2626;font-size:.8rem;margin-top:.2rem}
table.tbl{width:100%;font-size:.875rem;border-collapse:collapse}
table.tbl th{text-align:left;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:#64748b;padding:.6rem .75rem;border-bottom:1px solid #e2e8f0;white-space:nowrap}
table.tbl td{padding:.6rem .75rem;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.dark table.tbl th{border-color:#334155;color:#94a3b8}.dark table.tbl td{border-color:#1e293b}
table.tbl tbody tr:hover{background:rgba(59,130,246,.06)}
th[data-sort]{cursor:pointer;user-select:none}th[data-sort]::after{content:" ↕";opacity:.4}
th[data-sort].asc::after{content:" ▲";opacity:1}th[data-sort].desc::after{content:" ▼";opacity:1}
.skeleton{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 37%,#e2e8f0 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:.5rem}
.dark .skeleton{background:linear-gradient(90deg,#1e293b 25%,#334155 37%,#1e293b 63%);background-size:400% 100%}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.collapsed #sidebar{width:4rem}.collapsed #main{margin-left:4rem}.collapsed .side-label{display:none}
@media (max-width:1023px){.collapsed #main{margin-left:0}#sidebar.open{transform:none}}
.toast{min-width:240px;max-width:360px;border-radius:.6rem;padding:.7rem 1rem;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);font-size:.875rem;animation:tin .2s ease}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
@media print{
  .no-print,#sidebar,header{display:none!important}
  #main{margin-left:0!important}
  body{background:#fff!important;color:#000!important;font-family:'Sarabun','Noto Sans Thai',sans-serif}
  .card{border:1px solid #999;break-inside:avoid;background:#fff!important}
  .dark *{color:#000!important}
  @page{size:A4;margin:12mm}
}