/* Strategy scanner pages (shorts, credit, RSI, repair) — light theme */

.gf-main .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 0 32px;
  color: var(--gf-on-surface);
}

.gf-main .wrap h1,
.gf-main .wrap h2.section-title {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--gf-on-surface);
}

.gf-main .wrap h2.section-title {
  font-size: 18px;
  margin: 22px 0 12px;
}

.gf-main .wrap p,
.gf-main .note {
  margin: 0;
  color: var(--gf-on-surface-variant);
  font-size: 14px;
  line-height: 1.35;
}

.gf-main .wrap p + p,
.gf-main .wrap .note + .note {
  margin-top: 8px;
}

.gf-main .wrap a {
  color: var(--gf-primary);
  font-weight: 500;
  text-decoration: none;
}

.gf-main .wrap a:hover {
  text-decoration: underline;
}

.gf-main .controls,
.gf-main .panel {
  background: var(--gf-surface);
  border: 1px solid var(--gf-outline);
  border-radius: var(--gf-radius);
  padding: 16px;
}

.gf-main .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 18px 0 16px;
}

.gf-main .controls label {
  display: grid;
  gap: 6px;
  color: var(--gf-on-surface-variant);
  font-size: 13px;
}

.gf-main .controls input,
.gf-main .controls button,
.gf-main .controls select,
.gf-main .controls textarea {
  border-radius: 6px;
  border: 1px solid var(--gf-outline);
  font: inherit;
  font-family: var(--gf-font);
}

.gf-main .controls input,
.gf-main .controls select {
  background: var(--gf-surface);
  color: var(--gf-on-surface);
  padding: 0 10px;
  min-width: 130px;
  min-height: 40px;
}

.gf-main .controls textarea,
.gf-main .panel textarea {
  width: 100%;
  min-height: 160px;
  background: var(--gf-surface);
  color: var(--gf-on-surface);
  padding: 12px;
  line-height: 1.45;
  resize: vertical;
  border-radius: 6px;
  border: 1px solid var(--gf-outline);
  font: inherit;
  font-family: var(--gf-font);
  box-sizing: border-box;
  display: block;
}

.gf-main .panel textarea#tradeText {
  min-height: 200px;
}

.gf-main .panel textarea#ideaText {
  min-height: 140px;
}

.gf-main .panel .field-hint {
  margin: 0 0 10px;
  color: var(--gf-on-surface-variant);
  font-size: 13px;
  line-height: 1.4;
}

.gf-main .panel .field-label {
  display: block;
  margin: 14px 0 8px;
  color: var(--gf-on-surface);
  font-size: 14px;
  font-weight: 600;
}

.gf-main .panel .field-label:first-of-type {
  margin-top: 0;
}

.gf-main .input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 960px) {
  .gf-main .input-grid {
    grid-template-columns: 1fr;
  }
}

.gf-main .controls button {
  min-height: 40px;
  background: var(--gf-primary);
  color: #fff;
  font-weight: 500;
  padding: 0 16px;
  cursor: pointer;
  border-color: var(--gf-primary);
}

.gf-main .status {
  color: var(--gf-on-surface-variant);
  font-size: 13px;
  margin-left: auto;
}

.gf-main .summary,
.gf-main .metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.gf-main .metric,
.gf-main .repair-card,
.gf-main .signal-card,
.gf-main .target-stat {
  background: var(--gf-surface-container);
  border: 1px solid var(--gf-outline-variant);
  border-radius: var(--gf-radius);
  padding: 14px;
}

.gf-main .metric {
  min-height: 82px;
}

.gf-main .metric b,
.gf-main .repair-card b,
.gf-main .signal-card b,
.gf-main .target-stat b,
.gf-main .trade-summary b,
.gf-main .target-panel b {
  display: block;
  color: var(--gf-on-surface-variant);
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gf-main .metric span,
.gf-main .target-stat span {
  font-size: 21px;
  font-weight: 500;
  color: var(--gf-on-surface);
}

.gf-main .table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wide min-width is for multi-column scanners (shorts/credit). SMA overrides below. */
.gf-main table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
}

.gf-main th,
.gf-main td {
  border-bottom: 1px solid var(--gf-outline-variant);
  padding: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.gf-main th {
  color: var(--gf-on-surface-variant);
  font-size: 12px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--gf-surface);
  z-index: 1;
}

.gf-main td.symbol {
  font-weight: 700;
  color: var(--gf-primary);
}

/* ── SMA50 monitor page ─────────────────────────────────────────── */
/* Stacked full-width table + chart so all columns fit on desktop without side scroll. */

.gf-main .sma-monitor {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.gf-main .sma-monitor .summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Always stacked: full-width table first, chart below — best for “see all columns” */
.gf-main .sma-monitor .layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.gf-main .sma-monitor .list-hint {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--gf-outline-variant);
  background: var(--gf-surface-container);
  color: var(--gf-on-surface-variant);
  font-size: 13px;
  line-height: 1.4;
}

.gf-main .sma-monitor .sma-table-wrap {
  overflow: visible;
  max-height: none;
  min-width: 0;
  width: 100%;
}

/* Must NOT inherit scanner min-width: 1180px */
.gf-main .sma-monitor table.sma-table,
.gf-main table.sma-table {
  min-width: 0 !important;
  width: 100%;
  table-layout: auto;
}

.gf-main .sma-monitor table.sma-table th,
.gf-main .sma-monitor table.sma-table td {
  vertical-align: middle;
  padding: 12px 14px;
  white-space: nowrap;
}

.gf-main .sma-monitor table.sma-table th:nth-child(2),
.gf-main .sma-monitor table.sma-table td:nth-child(2),
.gf-main .sma-monitor table.sma-table th:nth-child(3),
.gf-main .sma-monitor table.sma-table td:nth-child(3),
.gf-main .sma-monitor table.sma-table th:nth-child(4),
.gf-main .sma-monitor table.sma-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
}

.gf-main tr.symbol-row {
  cursor: pointer;
}

.gf-main tr.symbol-row:hover {
  background: color-mix(in srgb, var(--gf-primary) 8%, transparent);
}

.gf-main tr.symbol-row:hover td.symbol {
  text-decoration: underline;
}

.gf-main tr.symbol-row.active {
  background: color-mix(in srgb, var(--gf-primary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--gf-primary);
}

.gf-main tr.symbol-row td {
  cursor: pointer;
  user-select: none;
}

.gf-main .sma-monitor .chart-panel {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.gf-main .chart-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--gf-on-surface-variant);
}

.gf-main .chart-box {
  position: relative;
  height: min(420px, 50vh);
  width: 100%;
  min-height: 280px;
}

.gf-main .chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.gf-main .chart-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gf-on-surface);
}

.gf-main .sma-monitor .controls {
  align-items: center;
}

.gf-main .sma-monitor .status {
  margin-left: auto;
  max-width: min(100%, 520px);
  text-align: right;
  word-break: break-word;
}

@media (max-width: 1024px) {
  .gf-main .sma-monitor .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gf-main .chart-box {
    height: 300px;
  }
}

@media (max-width: 640px) {
  .gf-main .sma-monitor {
    padding-bottom: 72px; /* clear mobile bottom nav */
  }

  .gf-main .sma-monitor .summary {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .gf-main .sma-monitor .metric {
    min-height: 0;
    padding: 10px;
  }

  .gf-main .sma-monitor .metric span {
    font-size: 18px;
  }

  .gf-main .sma-monitor .controls {
    flex-direction: column;
    align-items: stretch;
  }

  .gf-main .sma-monitor .controls button {
    width: 100%;
  }

  .gf-main .sma-monitor .status {
    margin-left: 0;
    max-width: 100%;
    text-align: left;
    font-size: 12px;
  }

  .gf-main .sma-monitor .list-hint {
    font-size: 12px;
    padding: 8px 10px;
  }

  .gf-main .sma-monitor table.sma-table th,
  .gf-main .sma-monitor table.sma-table td {
    padding: 10px 8px;
    font-size: 13px;
  }

  /* Only on very narrow phones allow gentle horizontal scroll if needed */
  .gf-main .sma-monitor .sma-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gf-main .sma-monitor .pill {
    font-size: 11px;
    padding: 2px 5px;
  }

  .gf-main .chart-box {
    height: 260px;
    min-height: 220px;
  }

  .gf-main .chart-head h2 {
    font-size: 16px;
  }
}

.gf-main .pill {
  display: inline-block;
  border: 1px solid var(--gf-outline);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
}

.gf-main .pill.good {
  border-color: var(--gf-positive);
  color: var(--gf-positive);
}

.gf-main .pill.bad {
  border-color: var(--gf-negative);
  color: var(--gf-negative);
}

.gf-main .pill.neutral {
  border-color: #f9ab00;
  color: #f9ab00;
}

.gf-main .good,
.gf-main .goodText {
  color: var(--gf-positive);
}

.gf-main .bad,
.gf-main .badText {
  color: var(--gf-negative);
}

.gf-main .neutral,
.gf-main .neutralText {
  color: #f9ab00;
}

.gf-main .verdict {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.gf-main .verdict strong {
  display: block;
  font-size: 34px;
  line-height: 1;
}

.gf-main .repair-grid,
.gf-main .signal-grid,
.gf-main .target-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.gf-main .repair-grid {
  grid-template-columns: repeat(2, 1fr);
}

.gf-main .signal-grid {
  grid-template-columns: repeat(3, 1fr);
}

.gf-main .target-grid {
  grid-template-columns: repeat(4, 1fr);
}

.gf-main .repair-card {
  min-height: 172px;
}

.gf-main .repair-card.good {
  border-color: var(--gf-positive);
}

.gf-main .repair-card.bad {
  border-color: var(--gf-negative);
}

.gf-main .trade-summary,
.gf-main .target-panel {
  background: var(--gf-surface-container);
  border: 1px solid var(--gf-outline);
  border-radius: var(--gf-radius);
  padding: 14px;
  margin-bottom: 16px;
}

.gf-main .trade-summary {
  border-left: 4px solid var(--gf-primary);
}

.gf-main .target-panel {
  border-left: 4px solid #9334e6;
}

.gf-main .ai-answer {
  white-space: pre-wrap;
  color: var(--gf-on-surface);
  font-size: 14px;
  line-height: 1.48;
}

@media (max-width: 960px) {
  .gf-main .summary,
  .gf-main .metrics,
  .gf-main .repair-grid,
  .gf-main .signal-grid,
  .gf-main .target-grid,
  .gf-main .verdict {
    grid-template-columns: 1fr;
  }

  .gf-main .status {
    width: 100%;
    margin-left: 0;
  }
}