/* Transaction Colors */
.transaction-income {
    @apply text-green-400 font-medium;
}

.transaction-expense {
    @apply text-red-400 font-medium;
}

/* Category Badge Styles */
.category-badge {
    @apply text-xs font-medium px-2 py-1 rounded-full border;
    text-transform: capitalize;
}

.category-groceries {
    @apply bg-blue-900/30 text-blue-300 border-blue-700/50;
}

.category-transport {
    @apply bg-purple-900/30 text-purple-300 border-purple-700/50;
}

.category-entertainment {
    @apply bg-orange-900/30 text-orange-300 border-orange-700/50;
}

.category-utilities {
    @apply bg-green-900/30 text-green-300 border-green-700/50;
}

.category-food {
    @apply bg-red-900/30 text-red-300 border-red-700/50;
}

.category-other {
    @apply bg-gray-800/50 text-gray-300 border-gray-600/50;
}

/* Reset default margins and padding */
html, body {
    margin: 0;
    padding: 0;
}

/* Custom Form Container */
.form-container {
    @apply max-w-2xl mx-auto;
}

/* Spending Bar Animation */
.spending-bar {
    transition: width 0.3s ease-in-out;
}

/* Health Score Circle Animation */
#health-score-circle {
    transition: stroke-dasharray 0.5s ease;
}

/* Loading Animation */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Button Hover Effects */
.btn-primary-custom {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
}

.btn-success-custom {
    @apply bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2;
}

.btn-danger-custom {
    @apply bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2;
}

/* Modal Overlay */
.modal-overlay {
    @apply fixed inset-0 bg-gray-900 bg-opacity-75 z-50 flex items-center justify-center p-4;
}



/* Theme Base Styles */
.dark {
    color-scheme: dark;
}

.light {
    color-scheme: light;
}

/* Light Theme Base Styles */
.light {
    background-color: #ffffff;
    color: #111827;
}

.light .bg-gray-900 {
    background-color: #ffffff !important;
}

.light .bg-gray-800 {
    background-color: #f9fafb !important;
}

.light .bg-gray-700 {
    background-color: #f3f4f6 !important;
}

.light .bg-gray-600 {
    background-color: #e5e7eb !important;
}

.light .text-gray-100 {
    color: #111827 !important;
}

.light .text-gray-200 {
    color: #374151 !important;
}

.light .text-gray-300 {
    color: #4b5563 !important;
}

.light .text-gray-400 {
    color: #6b7280 !important;
}

.light .border-gray-600 {
    border-color: #d1d5db !important;
}

.light .border-gray-700 {
    border-color: #9ca3af !important;
}

/* Light theme for form elements */
.light input[type="text"],
.light input[type="email"],
.light input[type="password"],
.light select,
.light textarea {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.light input[type="text"]:focus,
.light input[type="email"]:focus,
.light input[type="password"]:focus,
.light select:focus,
.light textarea:focus {
    border-color: #60768a !important;
    box-shadow: 0 0 0 3px rgba(96, 118, 138, 0.1) !important;
}

/* Light theme for buttons */
.light .bg-blue-600 {
    background-color: #60768a !important;
}

.light .bg-blue-600:hover {
    background-color: #4d5f70 !important;
}

.light .bg-green-600 {
    background-color: #22c55e !important;
}

.light .bg-green-600:hover {
    background-color: #16a34a !important;
}

.light .bg-red-600 {
    background-color: #ef4444 !important;
}

.light .bg-red-600:hover {
    background-color: #dc2626 !important;
}

/* Light theme for cards and containers */
.light .bg-white {
    background-color: #ffffff !important;
}

.light .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.light .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Light theme for navigation */
.light .md-nav-bar {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

.light .md-nav-header {
    border-color: #e5e7eb !important;
}

/* Light theme for SweetAlert2 */
.light .swal2-popup {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.light .swal2-title {
    color: #111827 !important;
}

.light .swal2-html-container {
    color: #374151 !important;
}

.light .swal2-close {
    color: #6b7280 !important;
}

.light .swal2-close:hover {
    color: #111827 !important;
}

.light .swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Responsive Table */
@media (max-width: 768px) {
    .table-responsive {
        @apply overflow-x-auto;
    }

    .table {
        @apply min-w-full;
    }
}

/* SweetAlert2 Custom Styles */
.swal-wide {
    width: 600px !important;
}

@media (max-width: 640px) {
    .swal-wide {
        width: 90% !important;
    }
}

/* SweetAlert2 Dark Mode Customization */
.swal2-popup {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important; /* gray-50 */
    border-radius: 0.75rem !important;
}

.swal2-title {
    color: #f9fafb !important;
}

.swal2-html-container {
    color: #e5e7eb !important; /* gray-200 */
}

.swal2-close {
    color: #9ca3af !important; /* gray-400 */
}

.swal2-close:hover {
    color: #f9fafb !important;
}

/* Dark mode styling for info boxes in modal */
.swal2-html-container .bg-blue-50 {
    background-color: rgba(30, 64, 175, 0.2) !important; /* blue-900/20 */
    border: 1px solid rgba(59, 130, 246, 0.3) !important; /* blue-600/30 */
}

.swal2-html-container .bg-blue-50 .text-blue-800 {
    color: #bfdbfe !important; /* blue-200 */
}

.swal2-html-container .bg-blue-50 .text-blue-200 {
    color: #bfdbfe !important; /* blue-200 */
}

.swal2-html-container .bg-blue-50 .text-blue-300 {
    color: #93c5fd !important; /* blue-300 */
}

.swal2-html-container .bg-blue-50 .text-blue-600 {
    color: #60a5fa !important; /* blue-400 */
}

/* Dark mode styling for warning boxes in modal */
.swal2-html-container .bg-yellow-50 {
    background-color: rgba(133, 77, 14, 0.2) !important; /* yellow-900/20 */
    border: 1px solid rgba(245, 158, 11, 0.3) !important; /* yellow-600/30 */
}

.swal2-html-container .bg-yellow-50 .text-yellow-800 {
    color: #fde68a !important; /* yellow-200 */
}

.swal2-html-container .bg-yellow-50 .text-yellow-200 {
    color: #fef3c7 !important; /* yellow-100 */
}

.swal2-html-container .bg-yellow-50 .text-yellow-600 {
    color: #fcd34d !important; /* yellow-300 */
}

/* Dark mode styling for buttons */
.swal2-styled.swal2-confirm {
    background-color: #60768a !important;
    color: #ffffff !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #4d5f70 !important;
}

.swal2-styled.swal2-cancel {
    background-color: #6b7280 !important;
    color: #ffffff !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #4b5563 !important;
}

/* Dark mode styling for background overlay */
.swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Dark mode styling for modal content text */
.swal2-html-container p {
    color: #d1d5db !important; /* gray-300 */
}

.swal2-html-container h1,
.swal2-html-container h2,
.swal2-html-container h3,
.swal2-html-container h4,
.swal2-html-container h5,
.swal2-html-container h6 {
    color: #f9fafb !important; /* gray-50 */
}

/* Dark mode styling for lists */
.swal2-html-container ul,
.swal2-html-container ol {
    color: #d1d5db !important; /* gray-300 */
}

/* Dark mode styling for links */
.swal2-html-container a {
    color: #60a5fa !important; /* blue-400 */
}

.swal2-html-container a:hover {
    color: #93c5fd !important; /* blue-300 */
}

/* Line clamp utility for notification messages */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile-first responsive utilities for AI insights */
@media (max-width: 767px) {
    .mobile-insights-spacing {
        margin-bottom: 0.5rem;
    }

    .mobile-insights-padding {
        padding: 0.75rem;
    }

    .mobile-insights-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .mobile-insights-title {
        font-size: 0.9375rem;
        line-height: 1.4;
    }

    .mobile-touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Material Design 3 Navigation Styles */
.md-nav-bar {
    @apply bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden;
}

.md-nav-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.md-nav-controls {
    @apply flex items-center space-x-2;
}

.md-nav-button {
    @apply p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors;
}

.md-nav-button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.md-period-indicator {
    @apply px-4 py-2 bg-gray-50 dark:bg-gray-700 rounded-lg;
}

.md-segmented-buttons {
    @apply inline-flex rounded-lg bg-white dark:bg-gray-800 p-1 shadow-sm border border-gray-200 dark:border-gray-600;
}

.md-segmented-button {
    @apply px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 min-w-[80px] text-center;
}

.md-segmented-button-active {
    @apply bg-[#60768a] text-white shadow-sm;
}

.md-segmented-button-inactive {
    @apply text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700;
}

/* Enhanced hover and focus states */
.md-nav-button:hover:not(:disabled) {
    @apply bg-gray-100 dark:bg-gray-700 transform scale-105;
}

.md-nav-button:focus {
    @apply outline-none ring-2 ring-[#60768a] ring-opacity-50;
}

.md-segmented-button:focus {
    @apply outline-none ring-2 ring-[#60768a] ring-opacity-50;
}

/* Smooth animations */
.md-nav-transition {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .md-nav-header {
        @apply px-4 py-3;
    }

    .md-nav-controls {
        @apply space-x-1;
    }

    .md-nav-button {
        @apply p-1.5;
    }

    .md-period-indicator {
        @apply px-3 py-1.5;
    }

    .md-segmented-button {
        @apply px-3 py-1.5 text-xs min-w-[70px];
    }
}

/* Enhanced touch targets for mobile */
@media (max-width: 640px) {
    button, .btn, a[role="button"] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }

    /* Improve readability on small screens */
    .mobile-readable {
        font-size: 16px;
        line-height: 1.5;
    }
}