/* Portfolio Analyzer - Minimal Design */
/* Paleta de colores simplificada: Grises + Un solo color de acento */

:root {
    --minimal-bg-primary: #1a1a1a;
    --minimal-bg-secondary: #2a2a2a;
    --minimal-bg-tertiary: #3a3a3a;
    --minimal-accent: #4a90e2;
    --minimal-text-primary: #ffffff;
    --minimal-text-secondary: #b0b0b0;
    --minimal-text-muted: #808080;
    --minimal-border: rgba(74, 144, 226, 0.2);
    --minimal-success: #28a745;
    --minimal-warning: #ffc107;
    --minimal-danger: #dc3545;
}

/* Main container */
.portfolio-analyzer-container {
    background: var(--minimal-bg-primary) !important;
    min-height: 100vh;
    color: var(--minimal-text-primary);
    padding: 1rem !important;
}

/* Main card */
.portfolio-main-card {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header - Simplificado */
.portfolio-header {
    background: var(--minimal-bg-tertiary) !important;
    border-bottom: 1px solid var(--minimal-border);
    padding: 1rem !important;
}

.portfolio-header::before {
    display: none; /* Remove shimmer animation */
}

/* Configuration panel */
.config-panel {
    background: var(--minimal-bg-tertiary) !important;
    border: 1px solid var(--minimal-border);
    box-shadow: none;
}

/* Advanced settings toggle */
.advanced-settings button {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border) !important;
}

.advanced-settings button:hover {
    background: var(--minimal-bg-tertiary) !important;
}

#advanced-content {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border);
    border-radius: 6px;
    padding: 0.75rem;
}

/* Compact form styling */
.grid input, .grid select {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
}

/* Method description box */
#method-description {
    background: rgba(74, 144, 226, 0.1) !important;
    border: 1px solid rgba(74, 144, 226, 0.3) !important;
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
    margin-top: 0.25rem !important;
}

/* Text colors */
.config-panel *,
.config-section *,
.portfolio-main-card *,
h1, h2, h3, h4, h5, h6,
p, span, div, label {
    color: var(--minimal-text-primary) !important;
}

.text-gray-500, .text-gray-600 { 
    color: var(--minimal-text-secondary) !important; 
}
.text-gray-700, .text-gray-800, .text-gray-900 { 
    color: var(--minimal-text-primary) !important; 
}

/* Form inputs */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: var(--minimal-bg-primary) !important;
    color: var(--minimal-text-primary) !important;
    border: 1px solid var(--minimal-border) !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--minimal-accent) !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
    outline: none;
}

input::placeholder {
    color: var(--minimal-text-muted) !important;
}

/* Method description */
#method-description {
    background: rgba(74, 144, 226, 0.1) !important;
    border: 1px solid var(--minimal-border) !important;
    color: var(--minimal-text-secondary) !important;
}

/* Configuration sections - Unified styling */
.monte-carlo-container,
.bl-config,
.custom-config,
.mst-config {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-accent) !important;
    border-radius: 6px !important;
}

/* Black-Litterman views */
.bl-view-row {
    background: var(--minimal-bg-tertiary) !important;
    border: 1px solid var(--minimal-border) !important;
}

.bl-view-row input {
    background: var(--minimal-bg-primary) !important;
    color: var(--minimal-text-primary) !important;
    border: 1px solid var(--minimal-border) !important;
}

/* Custom weights */
.custom-weight-container {
    background: var(--minimal-bg-tertiary) !important;
    border: 1px solid var(--minimal-border) !important;
}

.custom-weight-input {
    background: var(--minimal-bg-primary) !important;
    color: var(--minimal-text-primary) !important;
    border: 1px solid var(--minimal-border) !important;
    font-weight: 600;
    text-align: center;
}

.custom-weight-input:focus {
    border-color: var(--minimal-accent) !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2) !important;
}

/* Optimize button */
.optimize-btn {
    background: var(--minimal-accent) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
    transition: all 0.2s ease;
}

.optimize-btn::before {
    display: none; /* Remove shimmer effect */
}

.optimize-btn:hover {
    background: #357abd !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

/* Welcome message */
.welcome-message {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border);
}

/* Results sections */
.results-container .result-card {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 1.5rem !important;
}

/* Metric cards - Simplified color scheme */
.metric-card {
    background: var(--minimal-bg-tertiary) !important;
    border: 1px solid var(--minimal-border) !important;
    transition: transform 0.2s ease;
    min-height: 100px;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Specific metric colors - Only essential distinctions */
.metric-blue, .metric-card { 
    background: var(--minimal-bg-tertiary) !important; 
    border-color: var(--minimal-accent) !important; 
}
.metric-green { 
    background: var(--minimal-bg-tertiary) !important; 
    border-color: var(--minimal-success) !important; 
}
.metric-orange { 
    background: var(--minimal-bg-tertiary) !important; 
    border-color: var(--minimal-warning) !important; 
}
.metric-red { 
    background: var(--minimal-bg-tertiary) !important; 
    border-color: var(--minimal-danger) !important; 
}
.metric-purple, .metric-cyan { 
    background: var(--minimal-bg-tertiary) !important; 
    border-color: var(--minimal-accent) !important; 
}

/* Text colors for metrics */
.text-blue-400, .text-cyan-400, .text-purple-400 { color: var(--minimal-accent) !important; }
.text-green-400, .text-green-300 { color: var(--minimal-success) !important; }
.text-orange-400, .text-orange-300 { color: var(--minimal-warning) !important; }
.text-red-400, .text-red-300 { color: var(--minimal-danger) !important; }

/* Monte Carlo section */
.monte-carlo-section {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-accent) !important;
}

.monte-carlo-section::before {
    background: var(--minimal-accent) !important;
}

/* Chart containers */
.chart-container {
    background: var(--minimal-bg-secondary) !important;
    border: 1px solid var(--minimal-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px;
    margin: 1rem 0;
    min-height: 400px;
}

.chart-container::before {
    background: var(--minimal-accent) !important;
}

/* Error messages */
.error-message {
    background: rgba(220, 53, 69, 0.1) !important;
    border-left: 4px solid var(--minimal-danger) !important;
    color: #f8d7da !important;
}

/* Progress bars */
.progress-bg {
    background: var(--minimal-bg-primary) !important;
}

.progress-fill {
    background: var(--minimal-accent) !important;
}

/* Plotly charts - Simplified colors */
.js-plotly-plot .plotly {
    background: transparent !important;
}

.js-plotly-plot .main-svg {
    background: transparent !important;
}

/* Chart text */
.js-plotly-plot .gtitle,
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
    fill: var(--minimal-text-primary) !important;
}

.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text {
    fill: var(--minimal-text-secondary) !important;
}

/* Grid */
.js-plotly-plot .xgrid,
.js-plotly-plot .ygrid {
    stroke: #404040 !important;
    stroke-opacity: 0.3 !important;
}

/* Legend */
.js-plotly-plot .legend text {
    fill: var(--minimal-text-primary) !important;
}

/* Chart traces - Simplified color palette */
.js-plotly-plot .trace:nth-child(1) path {
    stroke: #606060 !important; /* Baseline - Gray */
}

.js-plotly-plot .trace:nth-child(2) path {
    stroke: var(--minimal-accent) !important; /* Portfolio - Accent */
    stroke-width: 3px !important;
}

.js-plotly-plot .trace:nth-child(3) path {
    stroke: var(--minimal-text-secondary) !important; /* Benchmark 1 */
}

.js-plotly-plot .trace:nth-child(4) path {
    stroke: var(--minimal-success) !important; /* Benchmark 2 */
}

/* Monte Carlo histogram */
#monte-carlo-distributions .js-plotly-plot .bars rect {
    fill: var(--minimal-accent) !important;
}

/* Hover effects */
.js-plotly-plot .hovertext {
    background: var(--minimal-bg-tertiary) !important;
    border: 1px solid var(--minimal-accent) !important;
    color: var(--minimal-text-primary) !important;
}

/* Remove unnecessary animations */
@keyframes shimmer,
@keyframes pulse-blue,
@keyframes pulse-purple {
    display: none;
}

.loading-shimmer {
    background: var(--minimal-bg-tertiary) !important;
    animation: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .portfolio-analyzer-container {
        padding: 0.5rem !important;
    }
    
    .chart-container {
        min-height: 300px !important;
        margin: 0.5rem 0 !important;
    }
    
    .metric-card {
        min-height: 80px !important;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--minimal-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--minimal-accent);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #357abd;
}