:root {
    --js-bg: #d7e3f2;
    --js-panel: #ffffff;
    --js-panel-soft: #f5f8fc;
    --js-line: #b9cce1;
    --js-text: #1a1a1a;
    --js-muted: #4a6074;
    --js-primary: #007bbd;
    --js-primary-strong: #183248;
    --js-accent: #c7620d;
    --js-accent-soft: #ffe5d0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--js-bg);
    color: var(--js-text);
}

[draggable="true"] {
    cursor: grab;
}

.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.toast-enter-active,
.toast-leave-active {
    transition: all .25s ease;
}

.toast-enter-from,
.toast-leave-to {
    opacity: 0;
    transform: translateX(12px);
}

.mapper-spinner {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(0, 123, 189, 0.2);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: mapper-spin 0.7s linear infinite;
}

.mapper-spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.mapper-column-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(237, 244, 251, 0.82);
    backdrop-filter: blur(2px);
}

.mapper-column-overlay-card {
    min-width: min(26rem, 100%);
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid #9ec3e6;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(24, 50, 72, 0.12);
}

@keyframes mapper-spin {
    to {
        transform: rotate(360deg);
    }
}

/* J&S theme overrides for existing Tailwind utility classes */
.bg-white {
    background-color: var(--js-panel) !important;
}

.bg-\[\#f0efed\] {
    background-color: var(--js-bg) !important;
}

.bg-\[\#f7f6f4\] {
    background-color: #edf4fb !important;
}

.bg-stone-50 {
    background-color: var(--js-panel-soft) !important;
}

.bg-stone-100 {
    background-color: #eef5fc !important;
}

.bg-blue-50 {
    background-color: #e7f1fb !important;
}

.bg-blue-50\/60 {
    background-color: rgba(231, 241, 251, 0.78) !important;
}

.bg-blue-600 {
    background-color: var(--js-primary) !important;
}

.bg-blue-700 {
    background-color: #156194 !important;
}

.bg-zinc-800 {
    background-color: var(--js-primary-strong) !important;
}

.bg-green-50 {
    background-color: #edf9f1 !important;
}

.bg-green-600 {
    background-color: #2f8f5f !important;
}

.bg-green-700 {
    background-color: #26734d !important;
}

.bg-amber-50 {
    background-color: var(--js-accent-soft) !important;
}

.bg-violet-50 {
    background-color: #ffe5d0 !important;
}

.bg-violet-100 {
    background-color: #ffcba2 !important;
}

.bg-violet-50\/30 {
    background-color: rgba(255, 229, 208, 0.45) !important;
}

.bg-violet-50\/40 {
    background-color: rgba(255, 229, 208, 0.55) !important;
}

.bg-violet-600 {
    background-color: #c7620d !important;
}

.border-stone-100 {
    border-color: #d6e3f0 !important;
}

.border-stone-200 {
    border-color: var(--js-line) !important;
}

.border-stone-300 {
    border-color: #9fb8d3 !important;
}

.border-blue-200 {
    border-color: #9ec3e6 !important;
}

.border-blue-400 {
    border-color: var(--js-primary) !important;
}

.border-green-200 {
    border-color: #b8e0c8 !important;
}

.border-violet-100 {
    border-color: #ffd8bb !important;
}

.border-violet-200 {
    border-color: #ffcba2 !important;
}

.border-violet-600 {
    border-color: #c7620d !important;
}

.border-amber-300 {
    border-color: #ffcba2 !important;
}

.border-b,
.border-t,
.divide-x> :not([hidden])~ :not([hidden]) {
    border-color: var(--js-line) !important;
}

.text-zinc-900 {
    color: var(--js-text) !important;
}

.text-zinc-800,
.text-zinc-700,
.text-zinc-600 {
    color: var(--js-primary-strong) !important;
}

.text-zinc-500,
.text-zinc-400,
.text-zinc-300 {
    color: var(--js-muted) !important;
}

.text-blue-600,
.text-blue-700 {
    color: var(--js-primary) !important;
}

.text-green-600 {
    color: #2f8f5f !important;
}

.text-violet-600,
.text-violet-700,
.text-violet-800 {
    color: #c7620d !important;
}

.text-red-500 {
    color: #c54b5f !important;
}

.text-white {
    color: #ffffff !important;
}

.hover\:bg-stone-50:hover,
.hover\:bg-stone-100:hover {
    background-color: #eef5fc !important;
}

.hover\:bg-violet-100:hover {
    background-color: #ffcba2 !important;
}

.hover\:text-violet-700:hover,
.hover\:text-violet-800:hover {
    color: #9f500a !important;
}

.hover\:border-stone-300:hover {
    border-color: #85aed8 !important;
}

.hover\:bg-blue-700:hover {
    background-color: #156194 !important;
}

.hover\:bg-green-700:hover {
    background-color: #26734d !important;
}

.hover\:text-blue-600:hover {
    color: #156194 !important;
}

.hover\:text-red-400:hover {
    color: #c54b5f !important;
}

.shadow-sm,
.shadow-lg {
    box-shadow: none !important;
}