/* Modern Portfolio CSS - Pure White Theme */

/* Prevent FOUC - Hide content initially and apply styles */
.modern-container {
    display: flex;
    gap: 20px;
    padding: 15px;  /* Reduced padding */
    background: white;
    min-height: auto;  /* Changed from calc(100vh - 80px) to auto for dynamic height */
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    opacity: 0;
    animation: fadeInContent 0.6s ease-out 0.1s forwards;
    align-items: flex-start;  /* Align items to top */
    flex-wrap: wrap;  /* Allow wrapping on smaller screens */
}

/* Smooth fade-in animation for content */
@keyframes fadeInContent {
    from { 
        opacity: 0; 
        transform: translateY(15px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Main container styles are above with animation */

.portfolio-section {
    background: white;
    border-radius: 8px;
    overflow: visible;  /* Changed to visible for scaling */
    box-shadow: none;
    width: fit-content;  /* Make width fit the content */
    max-width: 100%;  /* But don't exceed container */
    height: fit-content;  /* Make height fit the content */
}

/* Header removed - using main app navbar instead */

.section-header {
    background: white;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    box-shadow: none;
}

.section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.modern-table {
    width: auto;  /* Changed from 100% to auto for content-based width */
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    min-width: 600px;  /* Minimum width to ensure readability */
}

/* Scale the portfolio table by 1.15x */
.portfolio-table-scaled {
    transform: scale(1.15);
    transform-origin: top left;
    margin-right: 80px;  /* Add space to account for scaling */
    margin-bottom: 30px;  /* Add space below for scaling */
}

.modern-table thead th {
    background: #f8f9fa;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    border-bottom: 2px solid #e0e0e0;
}

.modern-table tbody td {
    padding: 10px 12px;  /* Reduced padding for more compact display */
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    white-space: nowrap;  /* Prevent text wrapping for cleaner look */
}

.expandable-row {
    cursor: pointer;
    transition: background 0.2s;
}

.expandable-row:hover {
    background: #f8f9fa;
}

.expand-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    text-align: center;
    color: #007bff;
    transition: transform 0.3s;
    cursor: pointer;
}

.expand-icon.expanded {
    transform: rotate(90deg);
}

.symbol-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.symbol-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.allocation-bar {
    background: #e9ecef;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
}

.allocation-fill {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.allocation-fill.negative {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.price {
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 500;
    color: #333;
}

.detail-row {
    background: white !important;
}

.detail-row.show {
    display: table-row;
    animation: slideDown 0.3s ease;
}

.detail-content {
    padding: 20px 40px;
    background: white;
    border-left: 3px solid #007bff;
}

.detail-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.positions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.chart-container {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.no-chart-message {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
}

.detail-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.detail-card h4 {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.detail-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    color: #666;
    font-size: 14px;
}

.stat-value {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.spot {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.badge.perp {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.badge.inactive {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.summary-row {
    background: #f8f9fa !important;
    /* font-weight: 600; removed to unbold Investment, Gross Lev, Total rows */
}

.summary-row td {
    border-bottom: none;
    padding: 15px;
    color: #333;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Metrics Panel */
.metrics-panel {
    background: white;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 45px;  /* Align with portfolio table accounting for header */
}

.metrics-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.metrics-table thead th {
    background: #dc3545;
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metrics-table tbody td {
    padding: 8px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.metrics-table tbody td.metric-name {
    color: #666;
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.metrics-table tbody td.metric-value {
    color: #333;
    font-weight: 600;
    font-size: 13px;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Sizing Tool */
.sizing-panel {
    background: white;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.sizing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.sizing-table thead th {
    background: #007bff;
    color: white;
    padding: 12px 15px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sizing-table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    color: #333;
}

.sizing-table tbody td.sizing-value {
    text-align: right;
    font-weight: 600;
    color: #007bff;
}

/* Make body take full width */
body {
    margin: 0;
    padding: 0;
    background: white;
}

/* Remove default Dash padding */
#react-entry-point {
    margin: 0;
    padding: 0;
}

#_dash-app-content {
    margin: 0;
    padding: 0;
}

/* Chart Period Selector */
.period-btn {
    margin: 0 2px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 40px !important;
    transition: all 0.2s ease !important;
}

.period-btn:not(.active) {
    background: white !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.period-btn.active {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3) !important;
}

.period-btn:hover:not(.active) {
    background: #f8f9fa !important;
    border-color: #007bff !important;
    color: #007bff !important;
}

/* Responsive layout */
@media (max-width: 1200px) {
    .modern-container {
        flex-direction: column;
    }
    
    .portfolio-section {
        flex: 1 1 100% !important;
    }
    
    .metrics-panel, .sizing-panel {
        flex: 1 1 100% !important;
        max-width: 100%;
    }
}

/* Spot/Perp allocation bar styles */
.spot-perp-allocation {
    padding: 4px 8px;
    vertical-align: middle;
}

.spot-perp-allocation > div {
    margin: 0 auto;
}

/* Hover effect for spot/perp bars */
.spot-perp-allocation:hover > div > div:first-child {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure proper alignment in table cells */
td.spot-perp-allocation {
    text-align: center;
    min-width: 100px;
}

/* Legend text styling */
.spot-perp-allocation span {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Modern DataTable Styling - Only for modern portfolio page */
.modern-container .dash-table-container .dash-spreadsheet-container {
    max-height: none !important;
    font-family: Arial, sans-serif !important;
}

.modern-container .dash-table-container .dash-spreadsheet-inner {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Modern header styling - Only for modern portfolio page */
.modern-container .dash-table-container .dash-header {
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.modern-container .dash-table-container th {
    background: inherit !important;
    color: white !important;
    border: none !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Modern cell styling - Only for modern portfolio page */
.modern-container .dash-table-container .dash-cell {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    color: #2c3e50 !important;
    background: white !important;
}

.modern-container .dash-table-container .dash-cell:hover {
    background: #f8f9fa !important;
}

/* Remove outer borders - Only for modern portfolio page */
.modern-container .dash-table-container .dash-spreadsheet {
    border: none !important;
}

/* Specific styles for each exchange - solid colors only - Modern page only */
.modern-container .bybit-1-table .dash-header {
    background: #024955 !important;
}

.modern-container .bybit-2-table .dash-header {
    background: #b85600 !important;
}

.modern-container .lighter-table .dash-header {
    background: #024955 !important;
}

.modern-container .hl-table .dash-header {
    background: #8B008B !important;
}

/* Summary table styling - Modern page only */
.modern-container .summary-table .dash-header {
    background: #878a7c !important;
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

.modern-container .summary-table .dash-cell {
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    padding: 12px 16px !important;
}

/* Add hover effects for rows - Modern page only */
.modern-container .dash-table-container tbody tr:hover .dash-cell {
    background: #f7fafc !important;
    transition: background 0.2s ease !important;
}

/* Style for empty tables - Modern page only */
.modern-container .dash-table-container .dash-empty-cell {
    padding: 30px !important;
    text-align: center !important;
    color: #a0aec0 !important;
    font-style: italic !important;
    font-family: Arial, sans-serif !important;
}