/* Custom CSS for FinanPy */

/* Additional styles that complement TailwindCSS */

.btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-secondary-600 hover:bg-secondary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.card {
    @apply bg-dark-800/60 backdrop-blur-sm rounded-xl p-6 border border-dark-700 hover:border-primary-500 transition-all duration-300;
}

/* Form inputs - dark theme styling with !important to override Tailwind */
.form-input {
    background-color: rgb(55, 65, 81) !important; /* bg-dark-700 equivalent */
    border: 1px solid rgb(75, 85, 99) !important; /* border-dark-600 equivalent */
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-input::placeholder {
    color: rgb(156, 163, 175) !important; /* placeholder-gray-400 */
}

.form-input:focus {
    outline: none !important;
    border-color: rgb(59, 130, 246) !important; /* primary-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important; /* focus:ring-2 focus:ring-primary-500 */
    background-color: rgb(55, 65, 81) !important; /* keep dark background */
}

.form-input:hover {
    border-color: rgb(107, 114, 128) !important; /* hover:border-gray-500 */
}

/* Select dropdown styling */
.form-select,
select.form-input {
    background-color: rgb(55, 65, 81) !important;
    border: 1px solid rgb(75, 85, 99) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    /* Add dropdown arrow styling */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.form-select:focus,
select.form-input:focus {
    outline: none !important;
    border-color: rgb(59, 130, 246) !important; /* primary-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
    background-color: rgb(55, 65, 81) !important; /* keep dark background */
}

/* Specific styling for select options */
.form-input option,
.form-select option,
select.form-input option {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(255, 255, 255) !important;
    padding: 0.5rem !important;
}

/* Input and textarea text styling */
input.form-input,
textarea.form-input,
select.form-input {
    color: rgb(255, 255, 255) !important;
}

/* Number input specific styling */
input[type="number"].form-input {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(255, 255, 255) !important;
}

/* Text input specific styling */
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(255, 255, 255) !important;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Financial charts styles */
.chart-container {
    @apply bg-dark-800/80 rounded-xl p-4 border border-dark-700;
}

/* Transaction status indicators */
.status-income {
    @apply text-success-400 bg-success-900/20 px-2 py-1 rounded-full text-xs font-medium;
}

.status-expense {
    @apply text-danger-400 bg-danger-900/20 px-2 py-1 rounded-full text-xs font-medium;
}

.status-pending {
    @apply text-warning-400 bg-warning-900/20 px-2 py-1 rounded-full text-xs font-medium;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-dark-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-dark-600 rounded-full hover:bg-dark-500;
}

/* Logout form button styles - make them look like regular links */
.logout-form-button {
    @apply border-0 bg-transparent p-0 m-0 font-inherit cursor-pointer outline-none;
}

.logout-form-button:focus {
    @apply outline-none ring-0;
}

/* Enhanced button styles for budget app */
.btn-primary-enhanced {
    @apply bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

/* Light blue button for login and signup - matches quick transaction button */
.btn-primary-light {
    background: linear-gradient(to right, #3B82F6, #2563EB) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}

.btn-primary-light:hover {
    background: linear-gradient(to right, #2563EB, #1D4ED8) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

.btn-secondary-enhanced {
    @apply bg-gradient-to-r from-secondary-600 to-secondary-700 hover:from-secondary-700 hover:to-secondary-800 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-success-enhanced {
    @apply bg-gradient-to-r from-success-600 to-success-700 hover:from-success-700 hover:to-success-800 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-warning-enhanced {
    @apply bg-gradient-to-r from-warning-600 to-warning-700 hover:from-warning-700 hover:to-warning-800 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-danger-enhanced {
    @apply bg-gradient-to-r from-danger-600 to-danger-700 hover:from-danger-700 hover:to-danger-800 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

/* Budget specific animations */
.progress-bar {
    @apply relative overflow-hidden rounded-full;
    background: linear-gradient(90deg, #374151 0%, #4B5563 100%);
}

.progress-bar-fill {
    @apply h-full rounded-full transition-all duration-1000 ease-out;
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
    transform-origin: left center;
    animation: progressFill 1.5s ease-out;
}

.progress-bar-fill.warning {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

.progress-bar-fill.danger {
    background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
}

@keyframes progressFill {
    from {
        transform: scaleX(0);
        opacity: 0.8;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Budget card hover effects */
.budget-card {
    @apply bg-dark-800/70 backdrop-blur-sm rounded-xl p-6 border border-dark-700 transition-all duration-300 hover:border-primary-500/50 hover:shadow-lg hover:shadow-primary-500/10;
}

.budget-card:hover {
    transform: translateY(-2px);
}

/* Chart container styles */
.chart-container {
    @apply bg-dark-800/80 rounded-xl p-6 border border-dark-700 relative overflow-hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 2s ease-in-out;
}

.chart-container:hover::before {
    left: 100%;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply bg-white text-black;
    }
}