/* Custom CSS for VCT Tracker */

/* Logo styling */
.logo-container {
    padding: 1.2rem 0;
    transition: all 0.3s ease;
    background-color: var(--bs-dark);
    margin-bottom: 0;
}

.qp-equity-logo {
    max-height: 70px;
    transition: all 0.3s ease;
}

/* Mobile responsive logo */
@media (max-width: 768px) {
    .qp-equity-logo {
        max-height: 42px;
    }
    
    .logo-container {
        padding: 0.8rem 0;
    }
}

/* Styles for VCT toggles */
.form-check-input.vct-toggle {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-check-input.vct-toggle.processing {
    opacity: 0.7;
    cursor: wait;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Style for loading spinner */
.loading-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spinner 0.8s linear infinite;
    margin-right: 5px;
}

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

/* Make sure toggle buttons are visible in dark mode */
.form-check-input.vct-toggle:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input.vct-toggle:not(:checked) {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-600);
}

/* Purple badge for portfolio changes */
.bg-purple {
    background-color: #6f42c1;
    color: white;
}