/* ============================================
   Correlation, Options, Risk, Calendar Styles
   ============================================ */

/* Correlation Matrix */
.corr-container { padding: 20px; }
.corr-matrix { display: inline-grid; gap: 2px; font-size: 11px; }
.corr-cell {
    padding: 10px;
    text-align: center;
    font-family: var(--font-mono);
    border-radius: 2px;
    min-width: 70px;
}
.corr-header { background: var(--bg-card); font-weight: 600; color: var(--text-secondary); }
.corr-positive-strong { background: rgba(34, 197, 94, 0.4); }
.corr-positive { background: rgba(34, 197, 94, 0.2); }
.corr-neutral { background: var(--bg-card); }
.corr-negative { background: rgba(239, 68, 68, 0.2); }
.corr-negative-strong { background: rgba(239, 68, 68, 0.4); }
.corr-self { background: var(--bg-hover); color: var(--text-muted); }

/* Options Chain */
.options-container { height: 100%; display: flex; flex-direction: column; }
.options-header { padding: 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border-primary); }
.options-chain { flex: 1; overflow: auto; }
.options-row { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 1px; background: var(--border-primary); }
.options-row:first-child { position: sticky; top: 0; z-index: 1; }
.options-calls, .options-puts { background: var(--bg-terminal); padding: 8px; font-size: 11px; }
.options-strike { background: var(--bg-card); padding: 8px; text-align: center; font-family: var(--font-mono); font-weight: 500; }
.options-header-row .options-calls, .options-header-row .options-puts { background: var(--bg-card); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 10px; }
.options-itm { background: rgba(34, 197, 94, 0.1); }
.options-atm { background: rgba(249, 115, 22, 0.1); }

/* Risk Dashboard */
.risk-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.risk-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.risk-label { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; }
.risk-value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; }
.risk-value.good { color: var(--market-up); }
.risk-value.warning { color: var(--accent-yellow); }
.risk-value.danger { color: var(--market-down); }
.risk-calculator { background: var(--bg-card); border-radius: 8px; padding: 20px; }
.risk-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.risk-field { display: flex; flex-direction: column; gap: 6px; }
.risk-field label { font-size: 11px; color: var(--text-muted); }
.risk-field input { padding: 10px; background: var(--bg-panel); border: 1px solid var(--border-primary); border-radius: 4px; color: var(--text-primary); font-family: var(--font-mono); }

/* Calendar */
.calendar-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.calendar-filter {
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.calendar-filter:hover { background: var(--bg-hover); }
.calendar-filter.active { background: var(--accent-orange); color: #000; border-color: var(--accent-orange); }

.calendar-events { display: flex; flex-direction: column; gap: 8px; }
.calendar-event {
    display: grid;
    grid-template-columns: 100px 60px 1fr auto;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 6px;
    border-left: 3px solid var(--text-muted);
    align-items: center;
}
.calendar-event.high { border-left-color: var(--accent-red); }
.calendar-event.medium { border-left-color: var(--accent-orange); }
.calendar-event.low { border-left-color: var(--accent-green); }
.event-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.event-currency { font-weight: 600; font-size: 12px; }
.event-title { font-size: 12px; }
.event-values { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 11px; }
.event-actual { color: var(--text-primary); font-weight: 500; }
.event-forecast { color: var(--text-muted); }
.event-previous { color: var(--text-muted); }