/* Custom styles for the crypto trading bot */

/* Minimal custom styles - rely on Bootstrap theme */
.navbar-brand {
    font-weight: bold;
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Status indicators */
.badge {
    font-size: 0.75em;
}

/* Chart container */
#priceChart {
    height: 300px !important;
}

/* Table responsiveness */
.table-responsive {
    border-radius: 0.375rem;
}

/* Form styling */
.form-text {
    font-size: 0.875em;
}

/* Alert styling */
.alert {
    border: none;
    border-radius: 0.5rem;
}

/* Footer */
footer {
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Custom spacing */
.gap-2 {
    gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        font-size: 0.875rem;
    }
}

/* Animation for status updates */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.updating {
    animation: pulse 1s infinite;
}

/* Profit/Loss color coding */
.profit-positive {
    color: var(--bs-success) !important;
}

.profit-negative {
    color: var(--bs-danger) !important;
}

/* Icon alignment */
[data-feather] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}