@layer components {
    .kanban-board {
        @apply flex gap-5 justify-center flex-wrap;

        .kanban-title {
            @apply bg-primary rounded-t-md px-4 py-2.5;

            h2 {
                @apply text-secondary text-lg;
            }
        }

        .kanban-column {
            @apply flex flex-col bg-white dark:bg-dark rounded-md min-w-[300px] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-transform duration-300 ease-in-out;
        }

        .kanban-column#json {
            @apply w-[400px] min-w-[400px] max-w-[400px];
        }

        .kanban-column#todo .task-list {
            @apply space-y-4 h-full;
        }

        .kanban-column#done {
            @apply flex-1 max-w-none;
        }

        .kanban-column#done .task-list {
            @apply grid grid-cols-2 gap-4 items-start max-h-[600px] overflow-y-auto pr-2.5;
        }

        .kanban-column#done .task-list::-webkit-scrollbar {
            @apply w-2;
        }

        .kanban-column#done .task-list::-webkit-scrollbar-track {
            @apply bg-gray-100 rounded-lg;
        }

        .kanban-column#done .task-list::-webkit-scrollbar-thumb {
            @apply bg-gray-400 rounded-lg;
        }

        .kanban-column#done .task-list::-webkit-scrollbar-thumb:hover {
            @apply bg-gray-500;
        }

        .kanban-column:hover {
            @apply -translate-y-1;
        }

        .task-list {
            @apply min-h-[200px] p-4;
        }

        .task {
            @apply bg-white rounded-md border border-primary p-2.5 cursor-grab transition-all duration-300 ease-in-out relative overflow-hidden;
        }

        .task:hover {
            @apply -translate-y-0.5 shadow-[0_5px_15px_rgba(0,0,0,0.1)] bg-primary/10;
        }

        .task:active {
            @apply cursor-grabbing;
        }

        .task h3 {
            @apply text-primary mb-2 text-base;
        }

        .task p {
            @apply text-primary text-sm mb-2.5 leading-snug;
        }

        /* Widget Preview Styles */
        .widget-preview {
            @apply mt-2.5;
        }

        .template-image-preview {
            @apply relative rounded-xl overflow-hidden border-2 border-gray-200 dark:border-darkborder transition-all duration-300 ease-in-out bg-white dark:bg-dark shadow-[0_4px_12px_rgba(0,0,0,0.1)] max-h-[200px] flex items-center justify-center;
        }

        .template-image-preview:hover {
            @apply -translate-y-0.5 shadow-[0_8px_25px_rgba(0,0,0,0.15)] border-primary;
        }

        .template-image-preview img {
            @apply w-full h-auto max-h-[200px] object-cover block transition-transform duration-300 ease-in-out;
        }

        .template-image-preview:hover img {
            @apply scale-105;
        }

        .template-overlay {
            @apply absolute inset-0 flex items-end justify-end p-2.5 opacity-0 transition-opacity duration-300 ease-in-out;
        }

        .template-image-preview:hover .template-overlay {
            @apply opacity-100;
        }

        .template-badge {
            @apply bg-primary text-secondary px-2 py-1 rounded-xl text-xs font-bold uppercase tracking-wider backdrop-blur-[10px] shadow-[0_2px_8px_rgba(0,0,0,0.2)];
        }

        .priority {
            @apply inline-block px-2 py-1 rounded-2xl text-xs font-bold uppercase;
        }

        .priority.high {
            @apply bg-red-500 text-white;
        }

        .priority.medium {
            @apply bg-yellow-400 text-gray-800;
        }

        .priority.low {
            @apply bg-cyan-400 text-white;
        }

        .add-task-btn {
            @apply w-full p-3 bg-indigo-500 text-white border-0 rounded-lg cursor-pointer text-base font-bold transition-colors duration-300 ease-in-out mt-2.5;
        }

        .add-task-btn:hover {
            @apply bg-indigo-600;
        }

        .add-task-btn:active {
            @apply scale-[0.98];
        }

        /* Drag and Drop Styles */
        .task.dragging {
            @apply opacity-50 rotate-[5deg] z-[1000];
        }

        .task-list.drag-over {
            @apply bg-primary/10 rounded-md border-2 border-dashed border-primary;
        }

        /* Sortable Styles */
        .task.sortable-ghost {
            @apply opacity-30 bg-gray-300 dark:bg-darkgray border-2 border-dashed border-indigo-500;
        }

        .task.sortable-chosen {
            @apply scale-105 shadow-[0_10px_25px_rgba(0,0,0,0.2)] z-[1000];
        }

        /* Drop indicator */
        .drop-indicator {
            @apply h-[3px] bg-indigo-500 my-1.5 mx-0 rounded-sm transition-all duration-200 ease-in-out;
        }

        .drop-indicator.active {
            @apply h-[5px] bg-indigo-700 shadow-[0_0_10px_rgba(102,126,234,0.5)];
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .kanban-board {
                @apply flex-col items-center;
            }

            .kanban-column {
                @apply w-full max-w-[350px];
            }

            .kanban-column#json {
                @apply w-full min-w-0 max-w-[350px];
            }

            .kanban-column#done {
                @apply max-w-[350px];
            }

            .kanban-column#done .task-list {
                @apply grid-cols-1 gap-2.5 max-h-[500px] overflow-y-auto pr-2;
            }

            .kanban-column#done .task-list::-webkit-scrollbar {
                @apply w-1.5;
            }

            .kanban-column#done .task-list::-webkit-scrollbar-track {
                @apply bg-gray-100 rounded-lg;
            }

            .kanban-column#done .task-list::-webkit-scrollbar-thumb {
                @apply bg-gray-400 rounded-lg;
            }

            .kanban-column#done .task-list::-webkit-scrollbar-thumb:hover {
                @apply bg-gray-500;
            }

            h1 {
                @apply text-3xl;
            }
        }

        .task.new-task {
            animation: slideIn 0.3s ease-out;
        }

        /* JSON Viewer Styles */
        .json-viewer {
            @apply bg-primary text-secondary rounded-md p-4 space-y-4;
        }

        .json-viewer h3 {
            @apply text-secondary;
        }

        .json-content {
            @apply bg-gray-900 rounded-md p-2.5 text-sm leading-snug overflow-x-auto whitespace-pre-wrap break-words max-h-[300px] overflow-y-auto border border-gray-600;
        }

        .copy-json-btn {
            @apply bg-blue-500 text-white border-0 rounded-md px-3 py-2 cursor-pointer text-sm mt-2.5 transition-colors duration-300 ease-in-out;
        }

        .copy-json-btn:hover {
            @apply bg-blue-600;
        }

        .copy-json-btn:active {
            @apply scale-[0.98];
        }

        /* Show JSON Button */
        .show-json-btn {
            @apply w-full p-3 bg-green-500 text-white border-0 rounded-lg cursor-pointer text-base font-bold transition-colors duration-300 ease-in-out mt-2.5;
        }

        .show-json-btn:hover {
            @apply bg-green-600;
        }

        .show-json-btn:active {
            @apply scale-[0.98];
        }

        /* Syntax highlighting for JSON */
        .json-content .string {
            @apply text-green-400;
        }
        .json-content .number {
            @apply text-orange-400;
        }
        .json-content .boolean {
            @apply text-pink-400;
        }
        .json-content .null {
            @apply text-red-400;
        }
        .json-content .key {
            @apply text-blue-300;
        }

        /* Card Header Styles */
        .card-header {
            @apply bg-gray-50 dark:bg-darkgray border-b border-gray-200 dark:border-darkborder p-5 rounded-t-xl;
        }

        .card-header h3 {
            @apply m-0 text-gray-800 dark:text-gray-200 text-xl font-semibold;
        }

        /* Loading Animation */
        .animate-spin {
            animation: spin 1s linear infinite;
        }



        /* Modal Button Styles */
        .modal button {
            @apply transition-all duration-300 ease-in-out;
        }

        .modal button:hover {
            @apply -translate-y-px shadow-[0_2px_8px_rgba(0,0,0,0.15)];
        }

        .modal button:active {
            @apply translate-y-0;
        }

        /* Input Field Styles */
        /* #contentName {
            @apply transition-all duration-300 ease-in-out border-2 border-gray-300 shadow-[0_1px_3px_rgba(0,0,0,0.1)];
        }

        #contentName:focus {
            @apply border-blue-500 shadow-[0_0_0_3px_rgba(59,130,246,0.1),0_4px_6px_rgba(0,0,0,0.1)] -translate-y-px;
        } */

        #contentName.error {
            @apply border-red-500 shadow-[0_0_0_3px_rgba(239,68,68,0.1)];
        }

        #contentName:hover:not(:focus) {
            @apply border-gray-300 shadow-[0_2px_4px_rgba(0,0,0,0.1)];
        }

        /* Label Styles */
        label[for="contentName"] {
            @apply font-semibold text-gray-700 mb-2 text-base;
        }
    }


    /* Dark mode support */
    .dark label[for="contentName"] {
        @apply text-gray-300;
    }

    .dark #contentName {
        @apply bg-gray-700 border-gray-600 text-gray-50;
    }

    .dark #contentName:focus {
        @apply border-blue-400 shadow-[0_0_0_3px_rgba(96,165,250,0.1),0_4px_6px_rgba(0,0,0,0.1)];
    }

    .dark #contentName:hover:not(:focus) {
        @apply border-gray-500 shadow-[0_2px_4px_rgba(0,0,0,0.2)];
    }

    /* Content Section Spacing */
    .content-section {
        @apply bg-gradient-to-br from-slate-50 to-slate-100 rounded-xl p-6 mb-6 border border-slate-200;
    }

    .dark .content-section {
        @apply bg-gradient-to-br from-slate-800 to-slate-700 border-slate-600;
    }
}


/* Animation for new tasks */
@keyframes slideIn {
    from {
        opacity: 0;
        translate: 0 5px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes spin {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}