/* Signal API Custom Styles - Theme Independent */

/* Override any theme styles that might interfere */
.signal-api-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    background-color: #fff !important;
    padding: 0.25rem 0 !important;
}

/* Main container styling */
.signal-api-wrapper .container-fluid {
    background-color: transparent !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.signal-api-wrapper .col-12 {
    background-color: transparent !important;
    padding: 0.25rem !important;
    max-width: 100% !important;
}

/* Signal Cards */
.signal-card {
    border: 1px solid #e9ecef !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    transition: none !important;
    margin-bottom: 0.25rem !important;
    background-color: #fff !important;
}

.signal-card .card-body {
    padding: 0.5rem !important;
}

.signal-card:hover {
    box-shadow: none !important;
}

/* Active Signal Animations */
.active-signal {
    border-color: #6f42c1 !important;
    background-color: #ffffff !important;
    animation: active-purple-blink 1.5s infinite !important;
    border-width: 2px !important;
    position: relative !important;
}

/* Force animation to work */
.signal-card.active-signal * {
    animation-fill-mode: both !important;
}

/* Closed Signal Background Colors */
.signal-card.closed-profit {
    background-color: #d1f2eb !important;
    border-color: #28a745 !important;
    border-radius: 0.5rem !important;
    border-width: 2px !important;
}

.signal-card.closed-loss {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    border-radius: 0.5rem !important;
    border-width: 2px !important;
}

/* Force closed signal colors */
/* .signal-card[class*="closed-"] {
    background-color: inherit !important;
} */

/* Result badges styling */
.result-profit {
    background-color: #28a745 !important;
    color: #fff !important;
    font-weight: bold !important;
}

.result-loss {
    background-color: #dc3545 !important;
    color: #fff !important;
    font-weight: bold !important;
}

@keyframes active-purple-blink {
    0% {
        background-color: #ffffff;
        border-color: #6f42c1;
        transform: scale(1);
    }
    25% {
        background-color: #f0f0ff;
        border-color: #5a32a3;
        transform: scale(1.02);
    }
    50% {
        background-color: #e0e0ff;
        border-color: #6f42c1;
        transform: scale(1.02);
    }
    75% {
        background-color: #f0f0ff;
        border-color: #5a32a3;
        transform: scale(1.02);
    }
    100% {
        background-color: #ffffff;
        border-color: #6f42c1;
        transform: scale(1);
    }
}

/* Signal Type Badges */
.signal-type-badge {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
}

.signal-type-buy {
    background-color: #28a745 !important;
    color: #fff !important;
    border: 1px solid #28a745 !important;
    font-weight: bold !important;
}

.signal-type-sell {
    background-color: #dc3545 !important;
    color: #fff !important;
    border: 1px solid #dc3545 !important;
    font-weight: bold !important;
}

/* Active signal badges animation */
.signal-card.active-signal .signal-type-buy {
    animation: buy-blink 2s infinite !important;
}

.signal-card.active-signal .signal-type-sell {
    animation: sell-blink 2s infinite !important;
}

@keyframes buy-blink {
    0% {
        background-color: #28a745;
        color: #fff;
    }
    50% {
        background-color: #1e7e34;
        color: #fff;
    }
    100% {
        background-color: #28a745;
        color: #fff;
    }
}

@keyframes sell-blink {
    0% {
        background-color: #dc3545;
        color: #fff;
    }
    50% {
        background-color: #c82333;
        color: #fff;
    }
    100% {
        background-color: #dc3545;
        color: #fff;
    }
}

/* Status Badges */
.status-badge {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 0.2rem !important;
}

.status-active {
    background-color: #e6e6ff !important;
    color: #6f42c1 !important;
    animation: status-purple-blink 1.5s infinite !important;
}

@keyframes status-purple-blink {
    0% {
        background-color: #ffffff;
        color: #6f42c1;
    }
    50% {
        background-color: #6f42c1;
        color: #fff;
    }
    100% {
        background-color: #ffffff;
        color: #6f42c1;
    }
}

.status-closed {
    background-color: #f8d7da !important;
    color: #842029 !important;
}

/* Result Badges */
.result-profit {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border: 1px solid #badbcc !important;
}

.result-loss {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border: 1px solid #f5c2c7 !important;
}

/* Trade Button */
.trade-button {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}

.trade-button:hover {
    background: linear-gradient(135deg, #0056b3, #004085) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 123, 255, 0.25) !important;
}

/* Filter Controls */
.signal-filters {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: none !important;
}

.signal-filters .form-label {
    color: #495057 !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.signal-filters .form-select {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.signal-filters .form-select:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Date Filter */
.date-filter {
    background-color: #fff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: none !important;
}

.date-filter .form-label {
    color: #495057 !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.date-filter .form-control {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.date-filter .form-control:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Signal Info */
.signal-info {
    font-size: 0.875rem !important;
    color: #6c757d !important;
}

.signal-symbol {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
}

.signal-price {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

/* Section Headers */
.signal-api-wrapper h2 {
    color: #495057 !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.signal-api-wrapper h4 {
    color: #6c757d !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    /* border-bottom: 1px solid #e9ecef !important; */
    padding-bottom: 0.25rem !important;
}

/* Loading States */
.signal-card.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.signal-card .row{
    padding: 10px 20px !important;
}

/* Date Filter Styling */
.date-filter {
    margin-bottom: 1rem !important;
    padding: 0.5rem !important;
    background-color: #f8f9fa !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e9ecef !important;
}

.date-filter .form-control-sm {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
}

.date-filter .btn-sm {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .date-filter .col-6 {
        margin-bottom: 0.5rem !important;
    }
    
    .date-filter .row {
        margin: 0 !important;
    }
    
    /* Mobile Signal Cards - Compact Layout */
    .signal-card .card-body {
        padding: 0.75rem !important;
    }
    
    .signal-card .row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .signal-card .col-md-2,
    .signal-card .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
    }
    
    /* Mobile Signal Info Section - Compact */
    .signal-card .col-md-2:first-child {
        text-align: center !important;
        padding: 0.5rem !important;
    }
    
    .signal-card .col-md-2:first-child .signal-info {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-2:first-child .signal-symbol {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-2:first-child .signal-price {
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-2:first-child .status-badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    /* Mobile Signal Details Section - Compact */
    .signal-card .col-md-3 {
        padding: 0.5rem !important;
    }
    
    .signal-card .col-md-3 .signal-type-badge {
        display: block !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    .signal-card .col-md-3 .mb-1 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.15rem 0 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-3 .mb-1 small {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
    }
    
    .signal-card .col-md-3 .mb-1 strong {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
    
    /* Mobile Stats Section - Compact */
    .signal-card .col-md-2:nth-child(3) {
        text-align: center !important;
        padding: 0.5rem !important;
    }
    
    .signal-card .col-md-2:nth-child(3) .mb-1 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.15rem 0 !important;
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-2:nth-child(3) small {
        font-size: 0.8rem !important;
        font-weight: 500 !important;
    }
    
    .signal-card .col-md-2:nth-child(3) strong {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }
    
    /* Mobile Action/Result Section - Compact */
    .signal-card .col-md-2:last-child {
        text-align: center !important;
        padding: 0.5rem !important;
    }
    
    .signal-card .col-md-2:last-child .trade-button {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }
    
    .signal-card .col-md-2:last-child .signal-type-badge {
        display: block !important;
        margin: 0 auto 0.25rem auto !important;
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    .signal-card .col-md-2:last-child .mb-2 {
        margin-bottom: 0.25rem !important;
    }
    
    .signal-card .col-md-2:last-child .fs-5 {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    
    /* Mobile Status Badge - Compact */
    .signal-card .status-badge {
        display: block !important;
        text-align: center !important;
        margin: 0.25rem auto !important;
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
}

/* Empty State */
.empty-state {
    text-align: center !important;
    padding: 3rem 1rem !important;
    color: #6c757d !important;
}

.empty-state i {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    opacity: 0.5 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .signal-api-wrapper {
        padding: 0.25rem !important;
    }
    
    .signal-api-wrapper .col-12.col-lg-10.col-xl-8 {
        padding: 0.25rem !important;
        margin: 0 !important;
    }
    
    .signal-card {
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    .signal-filters {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    .date-filter {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }
    
    .signal-filters .row > div {
        margin-bottom: 0.5rem !important;
    }
    
    .date-filter .row > div {
        margin-bottom: 0.5rem !important;
    }
    
    /* Mobile Section Headers - Compact */
    .signal-api-wrapper h2 {
        font-size: 1.25rem !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .signal-api-wrapper h4 {
        font-size: 1rem !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
        padding: 0.25rem !important;
    }
    
    /* Mobile Filter Buttons - Compact */
    .signal-filters .btn {
        width: 100% !important;
        margin-bottom: 0.25rem !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .date-filter .btn {
        width: 100% !important;
        margin-bottom: 0.25rem !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Mobile Form Controls - Compact */
    .signal-filters .form-select,
    .date-filter .form-control {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        border-radius: 0.375rem !important;
    }
    
    /* Mobile Labels - Compact */
    .signal-filters .form-label,
    .date-filter .form-label {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
    }
}

@media (max-width: 576px) {
    .signal-api-wrapper h2 {
        font-size: 1.5rem !important;
    }
    
    .signal-api-wrapper .lead {
        font-size: 1rem !important;
    }
}

/* Override theme styles that might interfere */
.signal-api-wrapper * {
    box-sizing: border-box !important;
}

.signal-api-wrapper .container,
.signal-api-wrapper .container-fluid {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Ensure proper spacing */
.signal-api-wrapper .mb-3 {
    margin-bottom: 1rem !important;
}

.signal-api-wrapper .mb-4 {
    margin-bottom: 1.5rem !important;
}

.signal-api-wrapper .mt-3 {
    margin-top: 1rem !important;
}

.signal-api-wrapper .mt-4 {
    margin-top: 1.5rem !important;
}