/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    @apply bg-gray-100 text-brand-primary transition-colors duration-300;
}
.dark body {
    @apply bg-gray-900 text-gray-200;
}

/* Form Styles */
.form-input:focus, .form-number:focus, .form-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    border-color: #2563eb;
}
.dark .form-input, .dark .form-number, .dark .form-select {
    @apply bg-gray-700 border-gray-600 text-gray-200;
}

/* Tab Styles - Now with Mobile Scrolling and Desktop Centering */
.scrollable-tabs {
    display: flex;
    justify-content: center; /* Center tabs on desktop */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
@media (max-width: 768px) {
    .scrollable-tabs {
        justify-content: flex-start; /* Left-align on mobile for scrolling */
    }
}
.scrollable-tabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}
.tab {
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}
.tab-active {
    @apply text-brand-blue border-b-brand-blue;
}
.dark .tab-active {
    @apply text-blue-400 border-b-blue-400;
}
.tab-inactive {
    @apply text-brand-secondary;
}
.dark .tab-inactive {
    @apply text-gray-400;
}
.tab-inactive:hover {
    @apply text-brand-primary;
}
.dark .tab-inactive:hover {
    @apply text-gray-200;
}

/* EV Calculator Toggle Button - Enhanced Styles */
.ev-toggle-btn {
    @apply rounded-md transition-all duration-200 text-brand-secondary dark:text-gray-400;
}
.ev-toggle-active {
    @apply bg-brand-blue text-white shadow;
}
.dark .ev-toggle-active {
    @apply bg-blue-600 text-white;
}
.ev-toggle-inactive {
    @apply opacity-60;
}

/* Info Icon */
.info-icon {
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    @apply text-gray-400 transition-colors;
}
.info-icon:hover {
    @apply text-brand-blue;
}
.dark .info-icon:hover {
    @apply text-blue-400;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 50;
}
.modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6 relative;
}
.modal-close-btn {
    @apply absolute top-3 right-4 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white text-3xl font-bold;
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    @apply bg-brand-primary text-white py-2 px-4 rounded-lg shadow-xl transition-transform opacity-0;
    transform: translateY(5rem);
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* General Dark Mode Component Styles */
.dark .bg-white { @apply bg-gray-800; }
.dark .bg-gray-50 { @apply bg-gray-700/50; }
.dark .bg-brand-light-bg { @apply bg-gray-700; }
.dark .border-gray-200 { @apply border-gray-700; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { @apply border-gray-700; }
.dark .text-brand-primary { @apply text-gray-100; }
.dark .text-brand-secondary { @apply text-gray-400; }