/* @section:strategy - Strategy Page Styles */

/* Page Header */
#page-strategy .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

#page-strategy .page-header h1 {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

#page-strategy .header-actions {
  display: flex;
  gap: 8px;
}

/* Focus Stock Selector */
.focus-selector {
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.focus-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.focus-tab {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.focus-tab.active {
  background: #818cf8;
  color: #fff;
  border-color: #818cf8;
}

.focus-tab:hover:not(.active) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.focus-tab-remove {
  opacity: 0.5;
  cursor: pointer;
  font-size: var(--t-lg);
  line-height: 1;
}

.focus-tab-remove:hover {
  opacity: 1;
}

.focus-tab.active .focus-tab-remove {
  opacity: 0.7;
}

.empty-state-inline {
  color: #64748b;
  font-size: var(--t-md);
  padding: 4px 0;
}

/* SIG Dashboard */
.sig-dashboard {
  padding: 0;
}

/* SIG Header */
.sig-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: #fff;
}

.sig-ticker {
  font-size: var(--t-4xl);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sig-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sig-spot {
  font-size: var(--t-3xl);
  font-weight: 600;
}

.sig-change {
  font-size: var(--t-lg);
}

.sig-change.positive { color: #34d399; }
.sig-change.negative { color: #f87171; }

.sig-regime {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sig-regime.positive { background: #34d399; color: #064e3b; }
.sig-regime.negative { background: #fbbf24; color: #78350f; }
.sig-regime.deep-negative { background: #ef4444; color: #fff; }
.sig-regime.neutral { background: #94a3b8; color: #1e293b; }

/* GEX Compact Layout */
.gex-compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px !important;
}

/* Zone Gauge Container */
.gex-zone-container {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.gex-zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.gex-regime-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #e2e8f0;
  color: #475569;
}

.gex-regime-badge.positive { background: #d1fae5; color: #059669; }
.gex-regime-badge.negative { background: #fee2e2; color: #dc2626; }
.gex-regime-badge.neutral { background: #fef3c7; color: #d97706; }

.gex-net {
  font-size: var(--t-base);
  color: #64748b;
  font-weight: 500;
}

/* Zone Gauge */
.gex-zone-gauge {
  height: 32px;
  border-radius: 16px;
  display: flex;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.gex-zone {
  height: 100%;
  transition: width 0.3s ease;
}

.gex-zone.put-zone {
  background: linear-gradient(90deg, #ef4444, #fca5a5);
  flex: 1;
}

.gex-zone.neutral-zone {
  background: linear-gradient(90deg, #fca5a5, #fcd34d, #86efac);
  flex: 2;
}

.gex-zone.call-zone {
  background: linear-gradient(90deg, #86efac, #10b981);
  flex: 1;
}

.gex-spot-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  background: #1e293b;
  border-radius: 2px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  transition: left 0.3s ease;
}

.gex-spot-marker::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e293b;
}

.gex-zone-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--t-xs);
  color: #64748b;
}

.gex-label-left { color: #ef4444; font-weight: 600; }
.gex-label-center { color: #d97706; }
.gex-label-right { color: #10b981; font-weight: 600; }

/* Level Cards */
.gex-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.gex-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2e8f0;
  transition: transform 0.15s, box-shadow 0.15s;
}

.gex-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.gex-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-lg);
  flex-shrink: 0;
}

.gex-card.call-wall .gex-card-icon { background: #d1fae5; color: #059669; }
.gex-card.zero-gamma .gex-card-icon { background: #fef3c7; color: #d97706; }
.gex-card.put-wall .gex-card-icon { background: #fee2e2; color: #dc2626; }
.gex-card.vol-trigger .gex-card-icon { background: #ffedd5; color: #ea580c; }

.gex-card-content {
  flex: 1;
  min-width: 0;
}

.gex-card-label {
  font-size: var(--t-xs);
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.gex-card-price {
  font-size: var(--t-xl);
  font-weight: 700;
  color: #1e293b;
}

.gex-card-dist {
  font-size: var(--t-sm);
  color: #64748b;
}

.gex-card.call-wall .gex-card-dist { color: #059669; }
.gex-card.put-wall .gex-card-dist { color: #dc2626; }

/* Bottom Row: Max Pain & Dealer */
.gex-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gex-maxpain-group,
.gex-dealer-group {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.gex-group-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.gex-mini-cards {
  display: flex;
  gap: 8px;
}

.gex-mini-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.mini-label {
  display: block;
  font-size: var(--t-2xs);
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.mini-value {
  display: block;
  font-size: var(--t-md);
  font-weight: 700;
  color: #d97706;
}

.mini-dist {
  display: block;
  font-size: var(--t-xs);
  color: #64748b;
}

.gex-dealer-items {
  display: flex;
  gap: 12px;
}

.dealer-item {
  flex: 1;
}

.dealer-label {
  display: block;
  font-size: var(--t-xs);
  color: #94a3b8;
  margin-bottom: 2px;
}

.dealer-value {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: #1e293b;
}

/* GEX Alerts */
.gex-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gex-alerts:empty::before {
  content: 'No critical alerts';
  font-size: var(--t-sm);
  color: #94a3b8;
  font-style: italic;
}

.gex-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--t-base);
  background: #fef3c7;
  color: #92400e;
  border-left: 3px solid #f59e0b;
}

.gex-alert.bullish {
  background: #d1fae5;
  color: #065f46;
  border-left-color: #10b981;
}

.gex-alert.bearish {
  background: #fee2e2;
  color: #991b1b;
  border-left-color: #ef4444;
}

/* Trade Setup Cards */
.trade-setup-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  border-left: 4px solid #e2e8f0;
}

.trade-setup-card:last-child { margin-bottom: 0; }

.trade-setup-card.long { border-left-color: #10b981; }
.trade-setup-card.short { border-left-color: #ef4444; }
.trade-setup-card.call { border-left-color: #3b82f6; }
.trade-setup-card.put { border-left-color: #f59e0b; }

.setup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.setup-type {
  font-size: var(--t-sm);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.setup-type.long { background: #d1fae5; color: #059669; }
.setup-type.short { background: #fee2e2; color: #dc2626; }
.setup-type.call { background: #dbeafe; color: #2563eb; }
.setup-type.put { background: #fef3c7; color: #d97706; }

.setup-conviction {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
}

.setup-conviction.high { background: #d1fae5; color: #059669; }
.setup-conviction.medium { background: #fef3c7; color: #d97706; }
.setup-conviction.low { background: #f1f5f9; color: #64748b; }

.setup-levels .setup-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid #e2e8f0;
}

.setup-levels .setup-row:last-child { border-bottom: none; }

.setup-levels .setup-row span:first-child {
  color: #64748b;
}

.setup-levels .setup-row span:last-child {
  font-weight: 600;
  color: #1e293b;
}

/* Hedged Cards */
.hedged-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  border-left: 4px solid #e2e8f0;
}

.hedged-card.bullish { border-left-color: #10b981; }
.hedged-card.bearish { border-left-color: #ef4444; }

.hedged-header { margin-bottom: 10px; }

.hedged-bias {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hedged-bias.bullish { background: #d1fae5; color: #059669; }
.hedged-bias.bearish { background: #fee2e2; color: #dc2626; }

.hedged-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid #e2e8f0;
}

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

.hedged-row span:first-child {
  color: #64748b;
}

.hedged-row span:last-child {
  font-weight: 600;
  color: #1e293b;
}

/* Position Sizing */
.sizing-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sizing-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sizing-row label {
  flex: 1;
  font-size: var(--t-sm);
  color: #64748b;
}

.sizing-row input {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: var(--t-base);
  text-align: right;
}

.sizing-row input:focus {
  outline: none;
  border-color: #818cf8;
}

.sizing-results {
  margin-top: 0;
}

.sizing-suggestions {
  margin-top: 12px;
  padding: 12px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: var(--t-sm);
  color: #92400e;
  line-height: 1.5;
}

/* Level Alerts */
.sig-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sig-alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.sig-alert.warning { background: #fef3c7; color: #92400e; }
.sig-alert.danger { background: #fee2e2; color: #dc2626; }
.sig-alert.info { background: #dbeafe; color: #1d4ed8; }
.sig-alert.success { background: #d1fae5; color: #059669; }

.sig-alert-icon { font-size: var(--t-lg); }

.sig-alert-empty {
  color: #94a3b8;
  font-size: var(--t-sm);
  font-style: italic;
}

/* AI Strategy Section */
.ai-strategy-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-status {
  font-size: var(--t-base);
  color: #818cf8;
}

/* Trade Cards */
.trade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.trade-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.trade-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.trade-card.long::before { background: linear-gradient(90deg, #10b981, #34d399); }
.trade-card.short::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.trade-card.call::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.trade-card.put::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.trade-card.spread::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.trade-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.trade-card-type {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
}

.trade-card.long .trade-card-type { background: #d1fae5; color: #059669; }
.trade-card.short .trade-card-type { background: #fee2e2; color: #dc2626; }
.trade-card.call .trade-card-type { background: #dbeafe; color: #2563eb; }
.trade-card.put .trade-card-type { background: #fef3c7; color: #d97706; }
.trade-card.spread .trade-card-type { background: #ede9fe; color: #7c3aed; }

.trade-card-conviction {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

.trade-card-conviction.high { background: #d1fae5; color: #059669; }
.trade-card-conviction.medium { background: #fef3c7; color: #d97706; }
.trade-card-conviction.low { background: #f1f5f9; color: #64748b; }

.trade-card-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.trade-card-level {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-card-level .label {
  font-size: var(--t-2xs);
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.trade-card-level .value {
  font-size: var(--t-md);
  font-weight: 600;
  color: #1e293b;
}

.trade-card-level .value.entry { color: #1e293b; }
.trade-card-level .value.stop { color: #ef4444; }
.trade-card-level .value.target { color: #10b981; }
.trade-card-level .value.rr { color: #818cf8; }

.trade-card-rationale {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: var(--t-sm);
  color: #64748b;
  line-height: 1.5;
}

/* AI Details Accordion */
.ai-details {
  margin-top: 12px;
}

.ai-details summary {
  cursor: pointer;
  font-size: var(--t-base);
  color: #64748b;
  padding: 8px 0;
  user-select: none;
}

.ai-details summary:hover {
  color: #818cf8;
}

.ai-details[open] summary {
  margin-bottom: 8px;
}

.ai-strategy-output {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.ai-strategy-empty {
  color: #94a3b8;
  font-size: var(--t-md);
  text-align: center;
  padding: 30px 20px;
}

.ai-strategy-content {
  font-size: var(--t-md);
  line-height: 1.6;
  color: #334155;
}

.ai-strategy-content h3 {
  font-size: var(--t-lg);
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}

.ai-strategy-content h3:first-child {
  margin-top: 0;
}

.ai-strategy-content h4 {
  font-size: var(--t-md);
  font-weight: 600;
  color: #475569;
  margin: 12px 0 6px 0;
}

.ai-strategy-content ul,
.ai-strategy-content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.ai-strategy-content li {
  margin: 4px 0;
}

.ai-strategy-content strong {
  color: #1e293b;
}

.ai-strategy-content .trade-rec {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0;
}

.ai-strategy-content .trade-rec.bullish {
  border-left: 4px solid #10b981;
}

.ai-strategy-content .trade-rec.bearish {
  border-left: 4px solid #ef4444;
}

.ai-strategy-content .trade-rec.neutral {
  border-left: 4px solid #f59e0b;
}

.ai-strategy-content code {
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--t-base);
}

.btn-ai {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  border: none;
  color: #fff;
  font-weight: 600;
}

.btn-ai:hover {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.btn-ai:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* Thesis Display */
.thesis-display {
  margin-bottom: 12px;
}

.thesis-content {
  font-size: var(--t-md);
  line-height: 1.6;
  color: #334155;
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.thesis-content h2 {
  font-size: var(--t-xl);
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}

.thesis-content h2:first-child {
  margin-top: 0;
}

.thesis-content h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  color: #334155;
  margin: 12px 0 6px 0;
}

.thesis-content h4 {
  font-size: var(--t-md);
  font-weight: 600;
  color: #475569;
  margin: 10px 0 4px 0;
}

.thesis-content p {
  margin: 8px 0;
}

.thesis-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.thesis-content li {
  margin: 4px 0;
}

.thesis-content strong {
  color: #1e293b;
}

.thesis-content code {
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--t-base);
  font-family: 'SF Mono', Monaco, monospace;
}

.thesis-content pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 10px 0;
}

.thesis-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.thesis-empty {
  color: #94a3b8;
  font-size: var(--t-md);
  font-style: italic;
  padding: 20px;
  text-align: center;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #e2e8f0;
}

/* Thesis Editor */
.thesis-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thesis-actions {
  display: flex;
  gap: 8px;
}

.thesis-editor textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: var(--t-md);
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}

.thesis-editor textarea:focus {
  outline: none;
  border-color: #818cf8;
}

/* File Preview */
.file-preview,
.file-loaded {
  margin-top: 8px;
  padding: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: var(--t-sm);
  color: #166534;
}

.file-loaded small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  white-space: pre-wrap;
  max-height: 60px;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
  .sig-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .sig-regime {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .focus-tabs {
    gap: 6px;
  }

  .focus-tab {
    padding: 6px 12px;
    font-size: var(--t-base);
  }

  .gex-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .gex-bottom-row {
    grid-template-columns: 1fr;
  }

  .gex-mini-cards {
    flex-wrap: wrap;
  }

  .gex-mini-card {
    min-width: calc(50% - 4px);
  }

  .sizing-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .sizing-row input {
    width: 100%;
    text-align: left;
  }
}