/* Extracted CSS from index.html */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Theme toggle icon transitions */
.theme-toggle { z-index: 60; }
.theme-toggle .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 300ms ease, opacity 300ms ease;
    opacity: 1;
}
.theme-toggle .icon--sun { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.8) rotate(-30deg); 
}
body.dark .theme-toggle .icon--sun { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1) rotate(0deg); 
}
body.dark .theme-toggle .icon--moon { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.8) rotate(30deg); 
}

/* Enhanced dark mode styling - minimalistic and beautiful */
body.dark { 
    background-color: #0a0e1a !important; 
    color: #e1e7ef; 
}

/* Background colors */
body.dark .bg-white { 
    background-color: #131825 !important; 
}
body.dark .bg-gray-50 { 
    background-color: #0a0e1a !important; 
}
body.dark .bg-gray-100 { 
    background-color: #1a2030 !important; 
}
body.dark .bg-gray-200 { 
    background-color: #252d3f !important; 
}

/* Text colors */
body.dark .text-gray-800 { 
    color: #e1e7ef !important; 
}
body.dark .text-gray-700 { 
    color: #d1d7df !important; 
}
body.dark .text-gray-500 { 
    color: #8892a0 !important; 
}
body.dark .text-gray-400 { 
    color: #6b7280 !important; 
}

/* Border colors */
body.dark .border-gray-200 { 
    border-color: #1f2937 !important; 
}
body.dark .border-gray-300 { 
    border-color: #2d3748 !important; 
}

/* Blue accent backgrounds */
body.dark .bg-blue-50 { 
    background-color: rgba(59, 130, 246, 0.1) !important; 
}
body.dark .bg-blue-500 {
    background-color: #3b82f6 !important;
}

/* Category badge colors in dark mode */
body.dark .bg-purple-100 { 
    background-color: rgba(168, 85, 247, 0.15) !important; 
}
body.dark .text-purple-700 { 
    color: #c084fc !important; 
}
body.dark .bg-green-100 { 
    background-color: rgba(34, 197, 94, 0.15) !important; 
}
body.dark .text-green-700 { 
    color: #86efac !important; 
}
body.dark .bg-orange-100 { 
    background-color: rgba(251, 146, 60, 0.15) !important; 
}
body.dark .text-orange-700 { 
    color: #fdba74 !important; 
}
body.dark .bg-red-100 { 
    background-color: rgba(239, 68, 68, 0.15) !important; 
}
body.dark .text-red-700 { 
    color: #fca5a5 !important; 
}
body.dark .bg-yellow-100 { 
    background-color: rgba(250, 204, 21, 0.15) !important; 
}
body.dark .text-yellow-700 { 
    color: #fde047 !important; 
}

/* Hover states in dark mode */
body.dark .hover\\:bg-gray-100:hover { 
    background-color: #1a2030 !important; 
}
body.dark .hover\\:bg-gray-200:hover { 
    background-color: #252d3f !important; 
}
body.dark .hover\\:bg-gray-300:hover { 
    background-color: #2d3748 !important; 
}
body.dark .hover\\:text-gray-600:hover { 
    color: #9ca3af !important; 
}

/* Shadow adjustments for dark mode */
body.dark .shadow-sm { 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; 
}
body.dark .shadow-md { 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important; 
}
body.dark .shadow-xl { 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4) !important; 
}

/* Input and select styling in dark mode */
body.dark input[type="text"],
body.dark input[type="date"],
body.dark textarea,
body.dark select {
    background-color: #1a2030 !important;
    border-color: #2d3748 !important;
    color: #e1e7ef !important;
}

body.dark input[type="text"]:focus,
body.dark input[type="date"]:focus,
body.dark textarea:focus,
body.dark select:focus {
    border-color: #3b82f6 !important;
    background-color: #1f2937 !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: #6b7280 !important;
}

/* Checkbox styling in dark mode */
body.dark input[type="checkbox"] {
    background-color: #1a2030 !important;
    border-color: #2d3748 !important;
}

/* Theme toggle button in dark mode */
body.dark .theme-toggle {
    background-color: #131825 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Modal backdrop in dark mode */
body.dark .bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}