/* ====== Base form styling ====== */
.form-input {
    @apply px-3 py-2 rounded-xl border border-slate-300 bg-white text-slate-800 shadow-sm
           hover:border-slate-400 focus:outline-none focus:ring-4 focus:ring-brand-200
           dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:hover:border-slate-500 dark:focus:ring-brand-900;
}

/* Hide default spinners for number inputs (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ====== Dropzone states ====== */
#dropzone.drag-over {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
}

/* ====== Drag sort hint ====== */
.drag-ghost {
    opacity: 0.6;
    transform: scale(0.98);
}
.drag-placeholder {
    border: 2px dashed rgba(59, 130, 246, 0.6);
}

/* ====== Focus visible for keyboard users ====== */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35) !important;
    border-color: rgba(59, 130, 246, 1) !important;
}

/* ====== Toasts ====== */
.toast {
    @apply px-4 py-3 rounded-xl shadow-soft border bg-white border-slate-200 text-slate-800
           dark:bg-slate-800 dark:text-slate-100 dark:border-slate-700;
    animation: slideIn 0.25s ease-out;
}
.toast-success {
    @apply border-green-200 bg-green-50 text-green-800 dark:border-green-900 dark:bg-green-900/40 dark:text-green-200;
}
.toast-error {
    @apply border-red-200 bg-red-50 text-red-800 dark:border-red-900 dark:bg-red-900/40 dark:text-red-200;
}
.toast-info {
    @apply border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900 dark:bg-blue-900/40 dark:text-blue-200;
}
@keyframes slideIn {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}