/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
}

/* Spinner Animation */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #4f46e5;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

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

/* View Transitions */
.view {
    transition: opacity 0.3s ease;
}

/* Button Styles */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Transaction Colors */
.bg-green-50 {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1);
}

.text-green-600 {
    color: #10b981;
}

.text-red-600 {
    color: #ef4444;
}

/* Modal Styles */
#confirmation-modal {
    transition: opacity 0.3s ease;
    z-index: 1000;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    #transactions td, #transactions th {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

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

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

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

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

/* Form Input Focus */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Toggle Button */
#toggleVisibility {
    transition: color 0.2s ease;
}

#toggleVisibility:hover {
    color: #4f46e5;
}

/* Notification Animations */
#errorMessage, #successMessage {
    transition: all 0.3s ease;
    transform: translateY(-10px);
    opacity: 0;
}

#errorMessage.show, #successMessage.show {
    transform: translateY(0);
    opacity: 1;
}