/* Custom CSS */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gradient Text for Logo/Headings */
.gradient-text {
    background: linear-gradient(90deg, #FDBA74, #FEE360); /* A warm gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

/* Glow Effect for Cards */
.glow-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Multi-step form progress indicator */
.step-indicator {
    position: relative;
    padding-bottom: 8px; /* Space for the line */
    cursor: pointer;
}

.step-indicator span {
    color: #9ca3af; /* text-gray-400 */
    transition: color 0.3s ease;
}

.step-indicator .absolute {
    transition: background-color 0.3s ease;
}

.step-indicator.active span {
    color: #e5e7eb; /* text-gray-200 */
}
.step-indicator.active .absolute {
    background-color: #9ca3af; /* gray-400 */
}

.step-indicator.completed span {
    color: #d1d5db; /* text-gray-300 */
}
.step-indicator.completed .absolute {
    background-color: #4b5563; /* gray-600 */
}

/* Severity Picker */
.severity-option.bg-gray-600 {
    /* Style for selected severity */
    border-color: #9ca3af; /* Highlight border */
    box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.5); /* Focus-like ring */
}

/* Live Error Status Tracker */
.status-tracker .status-item .status-dot {
    background-color: #ffffff; /* White background for dot */
    border-color: #d1d5db; /* Light gray border for dot */
}

.status-tracker .status-item.active .status-dot,
.status-tracker .status-item.completed .status-dot {
    background-color: #f59e0b; /* Yellow for active/completed */
    border-color: #f59e0b;
}

.status-tracker .status-item.active span,
.status-tracker .status-item.completed span {
    color: #1f2937; /* Dark text for active/completed */
}

/* Checkmark color inside status dot */
.status-tracker .status-item .status-dot .fa-check {
    color: transparent;
}
.status-tracker .status-item.active .status-dot .fa-check,
.status-tracker .status-item.completed .status-dot .fa-check {
    color: #1f2937; /* Dark color for checkmark */
}


/* Dark Mode Styles */
.dark body {
    background-color: #1a202c; /* Deeper dark for body */
    color: #cbd5e0; /* Lighter text in dark mode */
}
.dark .bg-gray-900 {
    background-color: #1a202c; /* Match body for deep sections */
}
.dark .bg-gray-50 {
    background-color: #2d3748; /* Slightly lighter dark for contrast */
}
.dark .bg-gray-800,
.dark .bg-gray-800\/80 {
    background-color: #4a5568; /* Even lighter dark for cards/nav */
}
.dark .bg-white {
    background-color: #4a5568; /* White elements in dark mode */
}

.dark .text-gray-900 {
    color: #cbd5e0;
}
.dark .text-gray-600 {
    color: #a0aec0;
}
.dark .text-gray-500 {
    color: #718096;
}
.dark .text-gray-300 {
    color: #e2e8f0;
}
.dark .text-gray-400 {
    color: #a0aec0;
}
.dark .border-gray-200 {
    border-color: #4a5568;
}
.dark .border-gray-300 {
    border-color: #718096;
}
.dark .border-gray-400 {
    border-color: #a0aec0;
}
.dark .border-gray-600 {
    border-color: #718096;
}
.dark .border-gray-700 {
    border-color: #4a5568;
}

/* Adjust glow card for dark mode */
.dark .glow-card:hover {
    box-shadow: 0 0 15px rgba(160, 174, 192, 0.3); /* Lighter shadow */
}

/* Specific button adjustments for dark mode */
.dark .bg-gray-300 {
    background-color: #a0aec0; /* Lighter gray for primary button */
    color: #1a202c; /* Dark text for light button */
}
.dark .hover\:bg-white:hover {
    background-color: #e2e8f0; /* Lighter hover for primary button */
}
.dark .bg-gray-700 {
    background-color: #4a5568;
}
.dark .hover\:bg-gray-600:hover {
    background-color: #2d3748;
}

/* Status tracker dots in dark mode */
.dark .status-tracker .status-item .status-dot {
    background-color: #2d3748; /* Darker bg for dot */
    border-color: #4a5568; /* Darker border for dot */
}
.dark .status-tracker .status-item.active .status-dot,
.dark .status-tracker .status-item.completed .status-dot {
    background-color: #f59e0b; /* Yellow for active/completed */
    border-color: #f59e0b;
}
.dark #status-progress-bar {
    background-color: #f59e0b; /* Yellow progress bar */
}

.dark .status-tracker .status-item.active span,
.dark .status-tracker .status-item.completed span {
    color: #e2e8f0; /* Lighter text for active/completed */
}
.dark .status-tracker .status-item .status-dot .fa-check {
    color: transparent;
}
.dark .status-tracker .status-item.active .status-dot .fa-check,
.dark .status-tracker .status-item.completed .status-dot .fa-check {
    color: #1a202c; /* Dark color for checkmark */
}
.dark .bg-gray-200 {
    background-color: #4a5568; /* Background for tags in dark mode */
}
.dark .text-gray-800 {
    color: #e2e8f0; /* Text color for tags in dark mode */
}