/* สไตล์เสริมที่ไม่ขึ้นกับ Tailwind */
:root { color-scheme: light; }
.dark { color-scheme: dark; }

.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 999px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

.bg-grid {
    background-image: linear-gradient(rgba(236, 72, 153, .07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(236, 72, 153, .07) 1px, transparent 1px);
    background-size: 32px 32px;
}

.sticky-col { position: sticky; left: 0; z-index: 2; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { box-shadow: 0 10px 30px -10px rgba(219, 39, 119, .35); }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.toast-in { animation: toast-in .2s ease-out; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up .35s ease-out both; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }