/* ============================================================
   SENTIO — Options Chain & Strategy Builder Styles
   ============================================================ */

/* ── OPTIONS HEADER ── */
#options-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
  flex-wrap:       wrap;
  gap:             12px;
}

#options-index-tabs {
  display: flex;
  gap:     4px;
}

.opt-idx-btn {
  padding:        8px 18px;
  border:         1px solid var(--border);
  border-radius:  6px;
  background:     transparent;
  color:          var(--text-dim);
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: 1px;
  cursor:         pointer;
  transition:     all 0.15s;
}

.opt-idx-btn.active {
  background:   var(--blue-dim);
  color:        var(--accent-blue);
  border-color: rgba(59,130,246,0.4);
}

#options-meta {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}

.opt-meta-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}

.opt-meta-label {
  font-family:    var(--font-mono);
  font-size:      8px;
  letter-spacing: 1px;
  color:          var(--text-dim);
}

.opt-meta-value {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-primary);
}

/* ── OPTIONS BODY ── */
#options-body {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   16px;
  align-items:           start;
}

@media (max-width: 900px) {
  #options-body {
    grid-template-columns: 1fr;
  }
}

/* ── CHAIN TABLE WRAP ── */
#options-chain-wrap {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
}

#options-chain-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  border-bottom:   1px solid var(--border);
}

#options-chain-table-wrap {
  overflow-y:  auto;
  max-height:  600px;
}

#options-chain-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-mono);
  font-size:       12px;
}

#options-chain-table thead tr th {
  padding:          8px 10px;
  background:       var(--bg-card);
  color:            var(--text-dim);
  font-size:        9px;
  letter-spacing:   1px;
  text-transform:   uppercase;
  border-bottom:    1px solid var(--border);
  position:         sticky;
  top:              0;
  z-index:          1;
}

#options-chain-table tbody tr td {
  padding:       7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  text-align:    center;
}

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

.atm-row {
  position: relative;
}

.atm-strike {
  font-size: 13px !important;
}

.opt-ltp {
  font-weight: 600;
  transition:  color 0.3s;
}

.opt-ltp:hover {
  text-decoration: underline;
}

/* ── STRATEGY BUILDER ── */
#strategy-builder-wrap {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       16px;
  position:      sticky;
  top:           80px;
}

#strategy-builder-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
}

/* ── TEMPLATES ── */
#template-btns {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.strategy-template-btn {
  padding:        5px 10px;
  border:         1px solid var(--border);
  border-radius:  4px;
  background:     var(--bg-card);
  color:          var(--text-secondary);
  font-family:    var(--font-mono);
  font-size:      10px;
  cursor:         pointer;
  transition:     all 0.15s;
  white-space:    nowrap;
}

.strategy-template-btn:hover {
  border-color: var(--accent-blue);
  color:        var(--accent-blue);
  background:   var(--blue-dim);
}

/* ── LEGS ── */
.strategy-leg-row {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap:     wrap;
}

.strategy-leg-row:last-child {
  border-bottom: none;
}

/* ── STRATEGY STATS ── */
#strategy-stats {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
  margin-top:            12px;
}

.strategy-stat {
  background:    var(--bg-card);
  border-radius: 6px;
  padding:       8px;
  text-align:    center;
}

.strategy-stat-label {
  font-family:    var(--font-mono);
  font-size:      8px;
  letter-spacing: 1px;
  color:          var(--text-dim);
  margin-bottom:  4px;
}

.strategy-stat-value {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 700;
  color:       var(--text-primary);
}

/* ── SCROLLBAR ── */
#options-chain-table-wrap::-webkit-scrollbar { width: 3px; }
#options-chain-table-wrap::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
#strategy-builder-wrap::-webkit-scrollbar { width: 3px; }