/* Custom styles for Finance CalcFest */

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

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

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-md;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Smooth transitions for dark mode */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Focus styles for accessibility */
.focus-ring:focus {
    @apply outline-none ring-2 ring-primary-500 ring-opacity-50;
}

/* Input field enhancements */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: white;
    color: #111827;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:invalid {
    border-color: #ef4444;
}

/* Dark mode for form inputs */
@media (prefers-color-scheme: dark) {
    .form-input {
        background-color: #374151;
        border-color: #4b5563;
        color: white;
    }
    
    .form-input:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }
}

/* Standard input field styling */
.input-field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: white;
    color: #111827;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.input-field:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-field:invalid {
    border-color: #ef4444;
}

/* Dark mode for input fields */
@media (prefers-color-scheme: dark) {
    .input-field {
        background-color: #374151;
        border-color: #4b5563;
        color: white;
    }
    
    .input-field:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }
}

/* Input label styling */
.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* Dark mode for labels */
@media (prefers-color-scheme: dark) {
    .input-label {
        color: #d1d5db;
    }
}

/* Result card styles */
.result-card {
    @apply bg-gradient-to-br from-primary-50 to-primary-100 dark:from-gray-700 dark:to-gray-600 
           border border-primary-200 dark:border-gray-600 rounded-xl p-6;
}

/* Calculator specific styles */
.calculator-container {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
}

.calculator-header {
    @apply text-center mb-8;
}

.calculator-title {
    @apply text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4;
}

.calculator-subtitle {
    @apply text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto;
}

.calculator-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.calculator-form {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6;
}

.calculator-results {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6;
}

/* Form group styles */
.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2;
}

.form-help {
    @apply text-xs text-gray-500 dark:text-gray-400 mt-1;
}

/* Button styles */
.btn-primary {
    @apply w-full bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800
           text-white font-semibold py-3 px-6 rounded-lg shadow-lg
           transition-all duration-200 transform hover:scale-105
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
}

.btn-secondary {
    @apply w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600
           text-gray-800 dark:text-gray-200 font-semibold py-3 px-6 rounded-lg
           transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50;
}

/* Result display styles */
.result-item {
    @apply flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0;
}

.result-label {
    @apply text-sm font-medium text-gray-600 dark:text-gray-400;
}

.result-value {
    @apply text-lg font-bold text-gray-900 dark:text-white;
}

.result-value-large {
    @apply text-2xl font-bold text-primary-600 dark:text-primary-400;
}

.result-value-success {
    @apply text-lg font-bold text-green-600 dark:text-green-400;
}

.result-value-warning {
    @apply text-lg font-bold text-yellow-600 dark:text-yellow-400;
}

.result-value-danger {
    @apply text-lg font-bold text-red-600 dark:text-red-400;
}

/* Table styles */
.amortization-table {
    @apply w-full border-collapse bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg;
}

.amortization-table th {
    @apply bg-gray-50 dark:bg-gray-700 px-4 py-3 text-left text-xs font-medium 
           text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.amortization-table td {
    @apply px-4 py-3 text-sm text-gray-900 dark:text-gray-300 border-b 
           border-gray-200 dark:border-gray-700;
}

.amortization-table tbody tr:hover {
    @apply bg-gray-50 dark:bg-gray-700;
}

/* Chart container */
.chart-container {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6;
}

/* Ad slot styles */
.ad-slot {
    @apply my-8;
}

/* How it works section */
.how-it-works {
    @apply bg-gray-50 dark:bg-gray-900 py-12;
}

.how-it-works-content {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.how-it-works h2 {
    @apply text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center;
}

.how-it-works h3 {
    @apply text-xl font-semibold text-gray-900 dark:text-white mb-4;
}

.formula-box {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
           rounded-lg p-4 font-mono text-sm text-gray-800 dark:text-gray-200 mb-4;
}

/* Related calculators */
.related-calculators {
    @apply bg-white dark:bg-gray-800 py-12;
}

.related-calculators-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
}

.related-calculator-card {
    @apply bg-gray-50 dark:bg-gray-700 rounded-lg p-6 hover:shadow-lg transition-shadow;
}

.related-calculator-card h3 {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
}

.related-calculator-card p {
    @apply text-gray-600 dark:text-gray-400 text-sm mb-4;
}

.related-calculator-card a {
    @apply text-primary-600 dark:text-primary-400 font-medium hover:text-primary-700 dark:hover:text-primary-300;
}

/* Loading spinner */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Error message */
.error-message {
    @apply bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 
           text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-4;
}

/* Success message */
.success-message {
    @apply bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 
           text-green-700 dark:text-green-300 px-4 py-3 rounded-lg mb-4;
}

/* Info message */
.info-message {
    @apply bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 
           text-blue-700 dark:text-blue-300 px-4 py-3 rounded-lg mb-4;
}

/* Responsive typography */
@media (max-width: 640px) {
    .calculator-title {
        @apply text-2xl;
    }
    
    .calculator-subtitle {
        @apply text-lg;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
    
    .amortization-table {
        font-size: 10px;
    }
}

/* Animation for result updates */
.result-update {
    animation: resultUpdate 0.3s ease-in-out;
}

@keyframes resultUpdate {
    0% { opacity: 0.5; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* Slider styles */
input[type="range"] {
    @apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer;
}

input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-5 h-5 bg-primary-600 rounded-full cursor-pointer shadow-lg;
}

input[type="range"]::-moz-range-thumb {
    @apply w-5 h-5 bg-primary-600 rounded-full cursor-pointer border-0 shadow-lg;
}

/* Toggle switch */
.toggle-switch {
    @apply relative inline-block w-12 h-6;
}

.toggle-switch input {
    @apply opacity-0 w-0 h-0;
}

.toggle-slider {
    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-400 rounded-full
           transition-colors duration-200;
}

.toggle-slider:before {
    @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full
           transition-transform duration-200;
}

input:checked + .toggle-slider {
    @apply bg-primary-600;
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Tooltip styles */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltip-text {
    @apply invisible absolute z-10 w-32 bg-gray-900 text-white text-xs rounded-md py-1 px-2
           bottom-full left-1/2 transform -translate-x-1/2 -translate-y-1 opacity-0
           transition-opacity duration-200;
}

.tooltip:hover .tooltip-text {
    @apply visible opacity-100;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-xl hover:-translate-y-1;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

.progress-fill {
    @apply bg-gradient-to-r from-primary-500 to-accent-500 h-2 rounded-full transition-all duration-300;
}