/* Custom styles for the document generation app */

/* Brand Color Variables */
:root {
    --nv-primary-accent: #002b61;
    --nv-secondary-accent: #eb282d;
    --nv-site-bg: #ffffff;
    --nv-light-bg: #edf2f7;
    --nv-dark-bg: #002b61;
    --nv-text-color: #514f50;
    --nv-text-dark-bg: #ffffff;
    --nv-c-1: #23afd3;
}

/* Loading animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading {
    animation: spin 1s linear infinite;
}

/* Gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, var(--nv-secondary-accent) 0%, #8B7355 100%);
}

.gradient-bg-light {
    background: linear-gradient(135deg, var(--nv-primary-accent) 0%, #4a5568 100%);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--nv-light-bg);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--nv-secondary-accent);
}

/* Status badges */
.status-pending {
    @apply bg-yellow-100 text-yellow-800 border-yellow-300;
}

.status-running {
    @apply bg-blue-100 text-blue-800 border-blue-300;
}

.status-completed {
    @apply bg-green-100 text-green-800 border-green-300;
}

.status-failed {
    @apply bg-red-100 text-red-800 border-red-300;
}

.status-cancelled {
    @apply bg-gray-100 text-gray-800 border-gray-300;
}

/* Form enhancements */
.form-input:focus {
    border-color: var(--nv-primary-accent);
    box-shadow: 0 0 0 3px rgba(0, 43, 97, 0.1);
}

/* Button animations */
.btn-primary {
    background-color: var(--nv-secondary-accent);
    transition: all 0.3s ease;
    color: white;
    border-color: transparent;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(235, 40, 45, 0.3);
    opacity: 0.95;
    background-color: #d12429;
}

/* Primary button using new color scheme */
.btn-primary-new {
    background-color: var(--nv-primary-accent);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary-new:hover {
    background-color: #001b42;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 43, 97, 0.3);
}

.btn-primary-new:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--nv-secondary-accent);
    ring-offset: 2px;
}

.btn-primary-new:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Secondary button using accent color */
.btn-secondary {
    background-color: var(--nv-secondary-accent);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #d12429;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(235, 40, 45, 0.3);
}

.btn-secondary:focus {
    outline: none;
    ring: 2px;
    ring-color: var(--nv-secondary-accent);
    ring-offset: 2px;
}

/* Accent button using cyan color */
.btn-accent {
    background-color: var(--nv-c-1);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: #1a8eab;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(35, 175, 211, 0.3);
}

/* Outline button */
.btn-outline {
    background-color: transparent;
    color: var(--nv-primary-accent);
    border: 2px solid var(--nv-primary-accent);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--nv-primary-accent);
    color: white;
    transform: translateY(-2px);
}

/* File upload styling */
.file-upload-area {
    border: 2px dashed #d1d5db;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: var(--nv-primary-accent);
    background-color: var(--nv-light-bg);
}

.file-upload-area.dragover {
    border-color: var(--nv-primary-accent);
    background-color: var(--nv-light-bg);
}

/* Drag and Drop styles */
.process-item {
    transition: all 0.3s ease;
    user-select: none;
}

.process-item.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.process-item.drag-over {
    border-color: var(--nv-primary-accent) !important;
    background-color: var(--nv-light-bg) !important;
    transform: scale(1.02);
}

.drag-handle {
    cursor: grab;
    transition: color 0.2s ease;
}

.drag-handle:active {
    cursor: grabbing;
}

.process-item:hover .drag-handle {
    color: var(--nv-primary-accent);
}

/* Remove button animations */
.remove-process-btn {
    transition: all 0.2s ease;
}

.remove-process-btn:hover {
    transform: scale(1.1);
}

/* Message notifications */
.message-notification {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}