/* Custom styles for BetterBacktestReport */

/* HTMX loading states */
.htmx-request {
    @apply opacity-50 pointer-events-none;
}

    .htmx-request::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #e5e7eb;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

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

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Button base styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg border border-transparent focus-ring transition-colors;
}

.btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
}

.btn-secondary {
    @apply btn bg-white text-gray-700 border-gray-300 hover:bg-gray-50 active:bg-gray-100;
}

/* Form styles */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

/* Animation utilities */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        @apply text-black bg-white;
    }
}