/* Base styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom file input styling */
input[type="file"] {
    position: relative;
    cursor: pointer;
}

input[type="file"]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    cursor: pointer;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.slide-in {
    animation: slideIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Loading animation */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5em;
    height: 1.5em;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Notification styling */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 50;
    animation: slideInRight 0.3s ease-out;
    max-width: 24rem;
}

.notification.success {
    border-left: 4px solid #34D399;
}

.notification.error {
    border-left: 4px solid #EF4444;
}

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Mapping section enhancements */
.mapping-row {
    transition: all 0.2s ease-in-out;
}

.mapping-row:hover {
    background-color: #f9fafb;
}

/* Form controls focus states */
select:focus, input:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Button hover effects */
button {
    transition: all 0.2s ease-in-out;
}

button:hover {
    transform: translateY(-1px);
}

button:active {
    transform: translateY(0);
}

/* Card hover effects */
.feature-card {
    transition: all 0.2s ease-in-out;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Modal animations */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

.modal-leave {
    animation: modalLeave 0.3s ease-in;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalLeave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Dark mode toggle button styles */
.dark-mode-toggle-button {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem; /* Adjusted for icon */
    background-color: #2c3e50; /* Dark blue-gray */
    border: none;
    border-radius: 50%; /* Make it round */
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    display: flex; /* For centering icon */
    align-items: center; /* For centering icon */
    justify-content: center; /* For centering icon */
}

.dark-mode-toggle-button svg {
    color: white; /* SVG icon color */
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
}

.dark-mode-toggle-button:hover {
    background-color: #34495e; /* Slightly lighter blue-gray */
}

/* Dark mode theme styles */
body.dark-mode {
    background-color: #1a202c; /* Dark gray */
    color: #e2e8f0; /* Light gray text */
}

body.dark-mode nav {
    background-color: #2d3748; /* Darker gray for nav */
    border-color: #4a5568; /* Gray border */
}

body.dark-mode nav h1 {
    color: #e2e8f0; /* Light gray text for nav title */
}

body.dark-mode footer {
    background-color: #2d3748; /* Darker gray for footer */
    border-color: #4a5568; /* Gray border */
}

body.dark-mode footer p {
    color: #a0aec0; /* Medium gray text for footer */
}

/* Style other elements as needed for dark mode */
body.dark-mode .bg-white {
    background-color: #2d3748 !important; /* Important to override Tailwind */
}

body.dark-mode .text-gray-900 {
    color: #e2e8f0 !important;
}

body.dark-mode .text-gray-500 {
    color: #a0aec0 !important;
}

body.dark-mode .text-gray-400 {
    color: #718096 !important;
}

body.dark-mode .border-gray-200 {
    border-color: #4a5568 !important;
}

body.dark-mode .bg-gray-50 {
    background-color: #1a202c !important;
}

body.dark-mode .feature-card {
    background-color: #2d3748; /* Dark background for cards */
    border-color: #4a5568;
}

body.dark-mode .feature-card:hover {
    background-color: #4a5568; /* Slightly lighter on hover */
}

body.dark-mode input[type="file"]::before {
    /* Adjust file input for dark mode if necessary */
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #2d3748; /* Dark scrollbar track */
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #4a5568; /* Dark scrollbar thumb */
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #718096; /* Lighter thumb on hover */
}

body.dark-mode .notification {
    background-color: #2d3748;
    color: #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .notification.success {
    border-left-color: #68D391; /* Lighter green for success border */
}

body.dark-mode .notification.error {
    border-left-color: #FC8181; /* Lighter red for error border */
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2d3748; /* Darker input background */
    color: #e2e8f0; /* Light text color for input */
    border-color: #4a5568; /* Consistent border color */
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="email"]::placeholder,
body.dark-mode input[type="password"]::placeholder,
body.dark-mode input[type="number"]::placeholder,
body.dark-mode input[type="search"]::placeholder,
body.dark-mode input[type="tel"]::placeholder,
body.dark-mode input[type="url"]::placeholder,
body.dark-mode textarea::placeholder {
    color: #a0aec0; /* Lighter placeholder text */
}

body.dark-mode select {
    /* Ensure select dropdown arrow is visible if it's custom styled */
}

/* Special care for file input as it's often custom styled */
body.dark-mode input[type="file"] {
    color: #e2e8f0; /* Make button text light */
    background-color: #2d3748; /* Optional: if it has a background */
}

/* If Tailwind's form plugin or other form styling libraries are used,
   you might need to target their specific classes for dark mode overrides.
   The above are general selectors. For example, for Tailwind focused styles: */
body.dark-mode .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(96, 165, 250, 0.5); /* Adjust focus ring for dark mode */
}
body.dark-mode .focus\:border-blue-500:focus {
    border-color: #60a5fa; /* Adjust focus border for dark mode */
}

/* Ensure dynamically created labels with text-gray-700 are visible in dark mode */
body.dark-mode .text-gray-700 {
    color: #cbd5e0 !important; /* A light grayish color, slightly less bright than pure white. Adjust as needed. */
}