/* Main CSS */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar-brand i {
    width: 24px;
    height: 24px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Custom Scrollbar for Preview */
#json-preview::-webkit-scrollbar {
    width: 8px;
}

#json-preview::-webkit-scrollbar-track {
    background: #212529;
}

#json-preview::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 4px;
}

#json-preview::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* Utilities */
.cursor-grab {
    cursor: grab;
}

.cursor-grab:active {
    cursor: grabbing;
}

/* SweetAlert2 Dark Mode Support */
[data-bs-theme="dark"] .swal2-popup {
    background: #212529;
    color: #dee2e6;
    border: 1px solid #495057;
}

[data-bs-theme="dark"] .swal2-title {
    color: #fff;
}

[data-bs-theme="dark"] .swal2-html-container {
    color: #adb5bd;
}

[data-bs-theme="dark"] .swal2-validation-message {
    background: #212529;
    color: #ea868f;
}