/**
 * Portfolio page styles - Only table and content styling
 * Uses trade list CSS classes for consistency
 */

/* Additional tab content styles for portfolio */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Tab button states */
.tct-btn.active {
    background: white;
    color: var(--tct-primary);
    border-color: var(--tct-primary);
}

.tct-btn:not(.active):hover {
    background: var(--tct-gray-100);
}

/* Stats inline display */
.tct-list-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Ensure portfolio table matches trade table styling */
#portfolioDataTable {
    width: 100%;
}

/* Position type colors */
.position-long {
    color: #2563eb !important;
    font-weight: 600;
}

.position-short {
    color: #f97316 !important;
    font-weight: 600;
}

/* Value highlighting */
.value-set {
    color: var(--tct-gray-800);
    font-weight: 500;
}

/* Arrow indicators for P/L */
.pnl-arrow, .price-arrow {
    font-size: 14px;
    font-weight: bold;
    margin-right: 4px;
    display: inline-block;
}

/* Positive P/L (gains) - Green */
.pl-positive {
    color: #10b981 !important;
    font-weight: 600;
}

.pl-positive .pnl-arrow,
.pl-positive .price-arrow {
    color: #10b981;
}

/* Negative P/L (losses) - Red */
.pl-negative {
    color: #ef4444 !important;
    font-weight: 600;
}

.pl-negative .pnl-arrow,
.pl-negative .price-arrow {
    color: #ef4444;
}

/* Price change column styling */
#portfolioDataTable td:nth-child(7) {
    font-weight: 600;
}

#portfolioDataTable td:nth-child(7) small {
    font-size: 11px;
    opacity: 0.9;
}

/* P&L columns styling */
#portfolioDataTable td:nth-child(9),
#portfolioDataTable td:nth-child(10) {
    font-weight: 700;
    font-size: 14px;
}

/* Historical table P/L columns */
#historicalDataTable td:nth-child(8),
#historicalDataTable td:nth-child(9) {
    font-weight: 700;
    font-size: 14px;
}

/* Group badge styling */
.group-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* Enhanced child row details */
.child-row-details {
    padding: 15px;
    background: #f9fafb;
    border-left: 3px solid #0073aa;
}

.child-details-table {
    width: 100%;
    max-width: 600px;
}

.child-details-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.child-details-table td:first-child {
    width: 200px;
    color: #6b7280;
}

.child-details-table td:last-child {
    font-weight: 600;
}

/* Toggle View Buttons */
.tct-view-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.toggle-buttons {
    display: flex;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.tct-toggle-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tct-toggle-btn:first-child {
    border-right: 1px solid #d1d5db;
}

.tct-toggle-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.tct-toggle-btn.active {
    background: #0073aa;
    color: white;
}

.tct-toggle-btn.active:hover {
    background: #005a87;
}

.tct-toggle-btn i {
    font-size: 12px;
}

/* Filters bar layout adjustments */
.tct-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tct-list-stats {
        flex-direction: column;
        gap: 10px;
    }

    .tct-list-header > div {
        flex-direction: column;
        width: 100%;
    }

    .tct-btn {
        width: 100%;
        justify-content: center;
    }

    .pnl-arrow, .price-arrow {
        font-size: 12px;
    }

    .tct-view-toggle {
        width: 100%;
        margin-bottom: 10px;
    }

    .toggle-buttons {
        flex: 1;
    }

    .tct-toggle-btn {
        flex: 1;
        justify-content: center;
    }
}