/* ============================================
   Options Index Page Styles
   ============================================ */

/* Options Header Icons (mirrors .indicator-icons in indicators page) */
.options-icons {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
}

.options-icon {
    font-size: 2.5rem;
    opacity: 0.85;
    transition: all 0.3s ease;
}

.options-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

.options-icon.primary {
    color: var(--primary-color);
}

.options-icon.secondary {
    color: var(--success-color);
}

.options-icon.tertiary {
    color: var(--warning-color);
}

/* ============================================
   Options Detail Page Styles
   Extends stocksense.css — DO NOT duplicate shared styles
   ============================================ */

/* ---- Filters Bar ---- */
#filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    font-size: 0.85rem;
}

#filters-bar label {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--gray-600);
}

#filters-bar select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    color: var(--gray-700);
}

#expiry-select {
    min-width: 240px;
}

.filter-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

/* ---- Top Pick Card ---- */
#top-pick-card {
    background: var(--bg-primary);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}

.pick-header {
    font-weight: bold;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.pick-symbol {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--gray-900);
    margin-bottom: 10px;
}

.pick-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pick-stat {
    display: flex;
    flex-direction: column;
}

.pick-stat .label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
}

.pick-stat .value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.extension-note {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--warning-color);
}

.no-pick {
    color: var(--gray-500);
    font-style: italic;
}

/* ---- Results Header ---- */
.options-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.options-results-header label {
    font-size: 0.85rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

#sort-select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    color: var(--gray-700);
}

/* ---- Table Enhancements ---- */
#options-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--gray-600);
    border-bottom: 2px solid var(--border-color);
    padding: 10px 12px;
}

#options-table td {
    padding: 10px 12px;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.85rem;
}

#options-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}

#options-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.sym {
    font-weight: 600;
    color: var(--gray-900);
}

/* ---- Badges ---- */
.badge-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.iv-high {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.iv-mid {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.iv-low {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.earn-ok {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.earn-caution {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.earn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ---- Score Colors ---- */
.score-good {
    color: var(--success-color);
    font-weight: 700;
}

.score-mid {
    color: var(--warning-color);
    font-weight: 700;
}

.score-bad {
    color: var(--danger-color);
    font-weight: 700;
}

/* ---- Detail Panel ---- */
#detail-panel .card-body {
    padding: 1.5rem;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.detail-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.detail-subtitle {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 1rem;
}

.detail-stat {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.detail-stat .stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.detail-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.detail-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 8px;
}

.detail-close-btn:hover {
    color: var(--gray-900);
}


/* ---- Responsive ---- */
@media (max-width: 768px) {
    #filters-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-separator {
        display: none;
    }

    .options-results-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .pick-details {
        flex-direction: column;
        gap: 8px;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Minimal options styles — extend stocksense.css where possible */
#options-table th, #options-table td { vertical-align: middle; }
.score-badge { padding:4px 8px; border-radius:8px; font-weight:600; }
.score-good { background:#10b981; color:#fff; }
.score-mid { background:#f59e0b; color:#fff; }
.score-bad { background:#ef4444; color:#fff; }
.earnings-upcoming { color:#f59e0b; font-weight:600; }
/* Options frontend CSS (scaffold) */
body { font-family: Arial, sans-serif; }

/* ---- Skew Badges ---- */
.skew-sentiment {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-style: italic;
    margin-left: 6px;
}

.skew-sentiment-extreme {
    color: #dc2626;
    font-weight: 600;
    font-style: normal;
}

.skew-row {
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* Ensure badge + sentiment stay on one line and are vertically centered */
.card-skew, .skew-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.card-skew .badge-pill, .skew-row .badge-pill {
    display: inline-flex;
    align-items: center;
}

/* Card skew badge — no overflow clipping (short labels used in cards) */
.card-skew {
    max-width: 100%;
    overflow: visible;
}

.card-skew .badge-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 4px 8px;
}

.skew-neutral {
    background: rgba(107, 114, 128, 0.15);
    color: var(--gray-600);
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.skew-bearish-mild {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.skew-bearish-high {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.skew-bullish {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.card-skew {
    margin-top: 6px;
    text-align: center;
}