/* Covered-call card, overview and pre-trade calculator.
   Sizes and spacing come from the tokens in styleguide/colors.css; no text below --text-xs. */

.covered-call-card .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.covered-call-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.covered-call-asof,
.covered-call-note,
.covered-call-leg-expiry,
.covered-call-leg-size,
.payoff-chart-caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.covered-call-note {
  margin: 0;
}

.covered-call-coverage {
  font-size: var(--text-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--color-teal-surface);
  color: var(--color-text-primary);
}

.covered-call-coverage--partial,
.covered-call-coverage--exceeds_shares,
.covered-call-coverage--no_shares {
  background: var(--color-danger-surface);
}

.covered-call-coverage--partial .fa,
.covered-call-coverage--exceeds_shares .fa,
.covered-call-coverage--no_shares .fa {
  color: var(--color-warning);
}

.covered-call-coverage--full .fa {
  color: var(--color-positive);
}

.covered-call-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm) var(--spacing-md);
  margin: 0;
}

.covered-call-figure dt {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.covered-call-figure dd {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.covered-call-figures--leg .covered-call-figure dd {
  font-size: var(--text-sm);
}

.covered-call-subvalue,
.covered-call-muted {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.covered-call-positive {
  color: var(--color-positive) !important;
}

.covered-call-negative {
  color: var(--color-negative) !important;
}

.covered-call-legs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.covered-call-leg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--color-grey-dark);
  border-radius: var(--radius-md);
}

.covered-call-leg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-sm);
}

.covered-call-leg-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-heading);
}

.covered-call-calculator-link,
.covered-call-sidebar-link a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-info);
  text-decoration: none;
}

.covered-call-calculator-link:hover,
.covered-call-sidebar-link a:hover {
  text-decoration: underline;
}

.covered-call-sidebar-link {
  margin: 0 0 var(--spacing-md);
}

/* Payoff chart: the fixed height keeps the card from jumping while Plotly loads. */
.payoff-chart-figure {
  margin: 0;
}

.payoff-chart {
  width: 100%;
  min-height: 320px;
}

.payoff-chart-error {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--spacing-lg) 0;
  text-align: center;
  margin: 0;
}

.payoff-chart-caption {
  margin-top: var(--spacing-xs);
}

/* Dashboard overview: the cards sit in a grid inside the section card. */
.covered-call-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.covered-call-overview-grid .covered-call-card {
  margin-bottom: 0 !important;
}

.covered-call-overview-tool {
  font-size: var(--text-sm);
}

/* Phones: the card sits inside the section card inside the page gutter, so every level of
   padding costs the chart width. */
@media (max-width: 575.98px) {
  .covered-call-overview-grid {
    padding: var(--spacing-sm);
  }

  .covered-call-card .card-body {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .covered-call-leg {
    padding: var(--spacing-sm);
  }
}

/* Calculator page */
.covered-call-intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--spacing-xs) 0 0;
}

.covered-call-calculator-form .form-text {
  font-size: var(--text-xs);
}