/* Macro Dashboard - Bloomberg Terminal Style */

#page-macro {
  padding: 6px 8px;
  background: #fff;
  min-height: calc(100vh - 60px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header */
.macro-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.macro-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.macro-last-update {
  font-size: var(--t-xs);
  color: #94a3b8;
}

.macro-controls .btn-secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: var(--t-xs);
  padding: 4px 10px;
}

.macro-controls .btn-icon {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
}

/* =====================================================
   DATA STRIPS - Simple inline market data bars
   ===================================================== */

.data-strip {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  margin-bottom: 4px;
  padding: 0;
  display: table;
  width: 100%;
  table-layout: auto;
}

.data-strip-label {
  display: table-cell;
  background: #334155;
  color: #e2e8f0;
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  width: 1%;
  position: relative;
}

.strip-label-text {
  margin-right: 4px;
}

/* Strip tooltip icon */
.data-strip-label .macro-tooltip.strip-tip {
  display: inline-flex;
  vertical-align: middle;
}

.data-strip-label .tooltip-icon {
  width: 13px;
  height: 13px;
  background: rgba(255,255,255,0.2);
  color: #e2e8f0;
  border-radius: 50%;
  font-size: var(--t-2xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  margin-left: 2px;
}

.data-strip-label .macro-tooltip:hover .tooltip-icon {
  opacity: 1;
  background: rgba(255,255,255,0.35);
}

/* Strip tooltip popup */
.data-strip-label .tooltip-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 20px);
  background: #1e293b;
  color: #94a3b8;
  padding: 12px 14px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  font-size: var(--t-xs);
  line-height: 1.5;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
}

.data-strip-label .tooltip-content::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-bottom-color: #1e293b;
}

.data-strip-label .macro-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.data-strip-label .tooltip-title {
  font-weight: 600;
  color: #e2e8f0;
  font-size: var(--t-sm);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
}

/* Dynamic tip status */
.tip-status {
  font-weight: 600;
  color: #e2e8f0;
  font-size: var(--t-sm);
  margin-bottom: 10px;
  padding: 6px 8px;
  background: #334155;
  border-radius: 4px;
}

.tip-detail {
  color: #94a3b8;
  font-size: var(--t-xs);
  line-height: 1.6;
  white-space: pre-line;
}

/* AI Tooltip Section - shown via global AI analysis */
.ai-tooltip-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #334155;
}

.ai-label {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ai-tooltip-content {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: #cbd5e1;
}

.ai-tooltip-content.loaded {
  background: #0f172a;
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 2px solid #3b82f6;
}

.ai-placeholder {
  color: #64748b;
  font-style: italic;
}

.ai-loading {
  color: #60a5fa;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.ai-error {
  color: #f87171;
}

.data-strip-items {
  display: table-cell;
  vertical-align: middle;
  padding: 0;
}

.data-strip-items-inner {
  display: flex;
  flex-wrap: wrap;
}

.data-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-left: 1px solid #f1f5f9;
  cursor: pointer;
  white-space: nowrap;
}

.data-item:first-child {
  border-left: none;
}

.data-item:hover {
  background: #f8fafc;
}

.data-item-ticker {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #475569;
}

.data-item-price {
  font-size: var(--t-xs);
  font-weight: 500;
  color: #1e293b;
  font-family: 'SF Mono', Consolas, monospace;
}

.data-item-change {
  font-size: var(--t-2xs);
  font-weight: 600;
  font-family: 'SF Mono', Consolas, monospace;
}

.data-item-change.up { color: #16a34a; }
.data-item-change.down { color: #dc2626; }
.data-item-change.flat { color: #94a3b8; }

/* VIX inverted */
.data-item.vix .data-item-change.up { color: #dc2626; }
.data-item.vix .data-item-change.down { color: #16a34a; }

/* Curve indicator */
.data-item.curve {
  background: #f8fafc;
  border-left: 2px solid #94a3b8;
}

.data-item.curve .data-item-ticker {
  font-weight: 700;
  color: #1e293b;
}

/* =====================================================
   SECTOR TILES - Flexbox proportional layout
   ===================================================== */

.sector-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
}

.sector-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 4px;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  min-height: 48px;
}

.sector-tile:hover {
  opacity: 0.85;
}

.sector-ticker {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sector-name {
  font-size: 7px;
  font-weight: 400;
  opacity: 0.9;
  white-space: nowrap;
}

.sector-change {
  font-size: var(--t-sm);
  font-weight: 600;
  margin-top: 2px;
}

/* =====================================================
   MARKET REGIME STRIP
   ===================================================== */

.macro-regime-bar {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  padding: 6px 10px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.regime-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.regime-label {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.regime-value {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.regime-value.risk-on { background: #dcfce7; color: #16a34a; }
.regime-value.risk-off { background: #fee2e2; color: #dc2626; }
.regime-value.rotation { background: #fef3c7; color: #d97706; }
.regime-value.divergence { background: #ede9fe; color: #7c3aed; }
.regime-value.neutral { background: #f1f5f9; color: #64748b; }

.regime-gauge {
  flex: 1;
  max-width: 140px;
}

.regime-gauge-track {
  height: 3px;
  background: linear-gradient(90deg, #fca5a5 0%, #fcd34d 50%, #86efac 100%);
  border-radius: 2px;
  position: relative;
}

.regime-gauge-fill { display: none; }

.regime-gauge-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 8px;
  background: #1e293b;
  border-radius: 1px;
}

.regime-gauge-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 7px;
  color: #cbd5e1;
  text-transform: uppercase;
}

.regime-description {
  font-size: var(--t-xs);
  color: #94a3b8;
  flex: 1;
}

/* =====================================================
   QUICK METRICS & ROTATION STRIPS
   ===================================================== */

.macro-quick-metrics {
  display: flex;
  gap: 1px;
  margin-bottom: 4px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: visible;
  position: relative;
}

.metric-card {
  background: #fff;
  padding: 4px 10px;
  flex: 1;
  min-width: 80px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-card:first-child { border-radius: 3px 0 0 3px; }
.metric-card:last-child { border-radius: 0 3px 3px 0; }
.metric-card:hover { background: #fafafa; }

.metric-header { display: none; }

.metric-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.metric-signal {
  font-size: var(--t-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.metric-signal.bullish { color: #16a34a; }
.metric-signal.bearish { color: #dc2626; }
.metric-signal.neutral { color: #64748b; }

.metric-value {
  font-size: var(--t-2xs);
  color: #94a3b8;
  margin-left: auto;
  font-family: 'SF Mono', 'Consolas', monospace;
}

/* Rotation Metrics Strip */
.macro-metrics-section {
  margin-bottom: 4px;
}

.macro-metrics-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  padding-left: 2px;
}

.macro-rotation-metrics {
  display: flex;
  gap: 1px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: visible;
  position: relative;
}

.rotation-card {
  background: #fff;
  padding: 4px 10px;
  flex: 1;
  min-width: 90px;
  border-left: 2px solid transparent;
}

.rotation-card:first-child { border-radius: 3px 0 0 3px; }
.rotation-card:last-child { border-radius: 0 3px 3px 0; }
.rotation-card:hover { background: #fafafa; }
.rotation-card::before { display: none; }

.rotation-card.bullish { border-left-color: #22c55e; }
.rotation-card.bearish { border-left-color: #ef4444; }
.rotation-card.neutral { border-left-color: #f59e0b; }

.rotation-header {
  margin-bottom: 1px;
}

.rotation-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rotation-signal-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rotation-arrow {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rotation-arrow svg { width: 8px; height: 8px; }

.rotation-arrow.up { background: #dcfce7; color: #16a34a; }
.rotation-arrow.down { background: #fee2e2; color: #dc2626; }
.rotation-arrow.flat { background: #f1f5f9; color: #94a3b8; }

.rotation-signal-text {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.rotation-signal-text.bullish { color: #16a34a; }
.rotation-signal-text.bearish { color: #dc2626; }
.rotation-signal-text.neutral { color: #64748b; }

/* Rotation Sparklines */
.rotation-sparkline-wrap {
  margin-top: 2px;
  height: 20px;
  width: 100%;
}

.rotation-sparkline {
  width: 100%;
  height: 20px;
  display: block;
}

.sparkline-legend { display: none; }

.rotation-value-num {
  font-size: var(--t-2xs);
  margin-left: auto;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.rotation-value-num.positive { color: #16a34a; }
.rotation-value-num.negative { color: #dc2626; }

/* Tooltips use global tooltip system (tooltip.js) */

/* =====================================================
   SECTION CONTAINERS
   ===================================================== */

.macro-section-full,
.macro-section {
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid #e2e8f0;
}

.macro-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.macro-section-title {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.macro-section-summary {
  font-size: var(--t-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}

.macro-section-summary .positive { color: #16a34a; font-weight: 600; }
.macro-section-summary .negative { color: #dc2626; font-weight: 600; }

/* Sector heatmap container */
.sector-heatmap {
  padding: 0;
}

.sector-ratio, .mag7-ratio {
  color: #94a3b8;
  font-size: var(--t-xs);
}

/* Main Grid - Bottom section with Cross-Asset, Mega-Cap, Calendar */
.macro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 4px;
}

.macro-section-wide {
  /* Takes middle column naturally in 1fr 2fr 1fr grid */
}

/* Treasury Rates Strip */
.rates-container {
  padding: 0;
}

.rates-strip {
  display: flex;
  border-top: 1px solid #e2e8f0;
}

.rate-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border-right: 1px solid #e2e8f0;
  text-align: center;
}

.rate-item:last-child { border-right: none; }
.rate-item.spread { background: #f8fafc; }
.rate-item.inverted { background: #fef2f2; }

.rate-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
}

.rate-value {
  font-size: var(--t-base);
  font-weight: 600;
  color: #1e293b;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.rate-change {
  font-size: var(--t-3xs);
  font-weight: 500;
  font-family: 'SF Mono', 'Consolas', monospace;
  margin-top: 1px;
}

.rate-change.up { color: #dc2626; }
.rate-change.down { color: #16a34a; }

.rate-item.up { border-top: 2px solid #fca5a5; }
.rate-item.down { border-top: 2px solid #86efac; }
.rate-item.spread { border-top: 2px solid #cbd5e1; }
.rate-item.inverted { border-top: 2px solid #f87171; }

/* Asset Cards Strip - for commodities */
.asset-cards {
  display: flex;
  gap: 2px;
  padding: 4px;
  overflow-x: auto;
}

.asset-card {
  padding: 4px 8px;
  background: #fafafa;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  min-width: 60px;
  border-left: 2px solid transparent;
}

.asset-card:hover { background: #f1f5f9; }
.asset-card.positive { border-left-color: #22c55e; }
.asset-card.negative { border-left-color: #ef4444; }

.asset-ticker {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #64748b;
  margin-bottom: 1px;
}

.asset-price {
  font-size: var(--t-sm);
  font-weight: 600;
  color: #1e293b;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.asset-change {
  font-size: var(--t-2xs);
  font-weight: 500;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.asset-change.positive { color: #16a34a; }
.asset-change.negative { color: #dc2626; }

/* =====================================================
   MAG7 LIST
   ===================================================== */

.mag7-list {
  display: flex;
  flex-direction: column;
}

.mag7-list-header {
  display: grid;
  grid-template-columns: 42px 72px 62px 52px 60px 48px;
  padding: 3px 6px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 7px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mag7-list-header span { white-space: nowrap; }

.mag7-list-header span:nth-child(3),
.mag7-list-header span:nth-child(4),
.mag7-list-header span:nth-child(5),
.mag7-list-header span:nth-child(6) {
  text-align: right;
}

.mag7-list-row {
  display: grid;
  grid-template-columns: 42px 72px 62px 52px 60px 48px;
  padding: 2px 6px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 2px solid transparent;
}

.mag7-list-row:hover { background: #fafafa; }
.mag7-list-row:last-child { border-bottom: none; }

.mag7-list-row.positive-row { border-left-color: #22c55e; }
.mag7-list-row.negative-row { border-left-color: #ef4444; }
.mag7-list-row::before { display: none; }

.mag7-list-ticker {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: #1e293b;
}

.mag7-list-name {
  font-size: var(--t-3xs);
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mag7-list-price {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: #1e293b;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.mag7-list-change-pct {
  font-size: var(--t-2xs);
  font-weight: 500;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.mag7-list-vol {
  font-size: var(--t-3xs);
  color: #64748b;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.mag7-list-volratio {
  font-size: var(--t-3xs);
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.mag7-list-volratio.high { color: #16a34a; font-weight: 500; }
.mag7-list-volratio.low { color: #94a3b8; }
.mag7-list-volratio.normal { color: #64748b; }

.mag7-list-change-pct.positive { color: #16a34a; }
.mag7-list-change-pct.negative { color: #dc2626; }

/* =====================================================
   CORRELATIONS
   ===================================================== */

.correlations-grid {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.corr-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: #fafafa;
  border-radius: 2px;
  border-left: 2px solid #e2e8f0;
}

.corr-item.expected { border-left-color: #22c55e; }
.corr-item.unusual { border-left-color: #f59e0b; }

.corr-pair {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: #64748b;
  min-width: 50px;
}

.corr-direction {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: #1e293b;
}

.corr-note {
  font-size: var(--t-3xs);
  color: #cbd5e1;
  margin-left: auto;
}

/* =====================================================
   CALENDAR
   ===================================================== */

.calendar-list { padding: 4px; }

.calendar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: #fafafa;
  border-radius: 2px;
  margin-bottom: 2px;
  border-left: 2px solid #e2e8f0;
}

.calendar-item:last-child { margin-bottom: 0; }
.calendar-item.impact-high { border-left-color: #ef4444; }
.calendar-item.impact-medium { border-left-color: #f59e0b; }
.calendar-item.impact-low { border-left-color: #22c55e; }

.calendar-time {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: #94a3b8;
  min-width: 60px;
}

.calendar-event {
  flex: 1;
  font-size: var(--t-xs);
  color: #1e293b;
}

.calendar-impact {
  font-size: 7px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
}

.calendar-impact.high { background: #fee2e2; color: #dc2626; }
.calendar-impact.medium { background: #fef3c7; color: #d97706; }
.calendar-impact.low { background: #dcfce7; color: #16a34a; }

.calendar-empty,
.calendar-loading {
  text-align: center;
  padding: 10px;
  color: #94a3b8;
  font-size: var(--t-xs);
}

.calendar-date-group { margin-bottom: 4px; }

.calendar-date-header {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 6px;
  background: #f1f5f9;
  border-radius: 2px;
  margin-bottom: 2px;
}

.macro-section-date {
  font-size: var(--t-2xs);
  color: #94a3b8;
}

/* =====================================================
   AI SECTION
   ===================================================== */

.macro-ai-section {
  margin-bottom: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e7ff;
}

.macro-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  cursor: pointer;
  background: #fafaff;
  border-bottom: 1px solid #e0e7ff;
}

.macro-ai-section.collapsed .macro-ai-header { border-bottom: none; }

.macro-ai-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1e293b;
  font-weight: 500;
  font-size: var(--t-xs);
}

.macro-ai-icon {
  background: #6366f1;
  color: #fff;
  font-size: 7px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 2px;
}

.macro-ai-time {
  font-size: var(--t-2xs);
  color: #818cf8;
}

.macro-ai-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.macro-ai-refresh {
  background: #eef2ff;
  border: none;
  color: #6366f1;
  font-size: var(--t-sm);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.macro-ai-refresh:hover { background: #e0e7ff; }

.macro-ai-toggle {
  color: #a5b4fc;
  font-size: var(--t-3xs);
}

.macro-ai-section.collapsed .macro-ai-toggle { transform: rotate(-90deg); }
.macro-ai-section.collapsed .macro-ai-content { display: none; }

.macro-ai-content {
  background: #fff;
  max-height: 180px;
  overflow-y: auto;
}

.macro-ai-empty {
  text-align: center;
  padding: 12px;
}

.macro-ai-empty p {
  color: #a5b4fc;
  font-size: var(--t-xs);
}

.macro-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  color: #818cf8;
  font-size: var(--t-xs);
}

.macro-ai-loading .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e0e7ff;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.macro-ai-box {
  padding: 0 10px 10px;
}

.macro-ai-section-block {
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.macro-ai-section-block:last-child { border-bottom: none; }

.macro-ai-section-title {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}

.macro-ai-section-title::before { display: none; }

.macro-ai-section-content {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: #475569;
}

.macro-ai-section-content strong { color: #1e293b; }
.macro-ai-section-content .bullish { color: #16a34a; font-weight: 500; }
.macro-ai-section-content .bearish { color: #dc2626; font-weight: 500; }

.macro-ai-timestamp {
  font-size: var(--t-3xs);
  color: #a5b4fc;
  text-align: right;
  padding: 4px 10px;
  background: #fafafa;
}

/* Loading */
.macro-loading {
  padding: 10px;
  text-align: center;
  color: #cbd5e1;
  font-size: var(--t-xs);
}

/* =====================================================
   MACRO TOOLTIPS
   ===================================================== */

.macro-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.macro-tooltip .tooltip-icon {
  width: 12px;
  height: 12px;
  background: #64748b;
  color: #fff;
  border-radius: 50%;
  font-size: var(--t-3xs);
  font-weight: 700;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  cursor: help;
  transition: opacity 0.15s;
}

.macro-tooltip:hover .tooltip-icon {
  opacity: 0.7;
}

.macro-tooltip .tooltip-content {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-width: calc(100vw - 20px);
  max-height: 300px;
  overflow-y: auto;
  background: #1e293b;
  color: #94a3b8;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  font-size: var(--t-xs);
  line-height: 1.5;
  text-transform: none;
  font-weight: 400;
}

.macro-tooltip .tooltip-content::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-bottom-color: #1e293b;
}

.macro-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.macro-tooltip .tooltip-title {
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 4px;
  font-size: var(--t-sm);
}

.macro-tooltip .tooltip-text {
  color: #94a3b8;
}

/* Portal tooltip arrow classes (used by tooltip-position.js) */
.tooltip-content.arrow-bottom::before {
  bottom: 100% !important;
  top: auto !important;
  left: var(--arrow-left, 50%) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-bottom-color: #1e293b !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.tooltip-content.arrow-top::before {
  top: 100% !important;
  bottom: auto !important;
  left: var(--arrow-left, 50%) !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-top-color: #1e293b !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* Right-aligned tooltips for elements on the right side */
.macro-tooltip.tip-right .tooltip-content {
  left: auto;
  right: 0;
}

.macro-tooltip.tip-right .tooltip-content::before {
  left: auto;
  right: 14px;
}

/* Inline data item tooltips - show on hover */
.data-item[data-tip] {
  position: relative;
}

.data-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1e293b;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--t-xs);
  line-height: 1.5;
  width: max-content;
  max-width: min(280px, calc(100vw - 40px));
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.data-item[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Sector tile tooltips */
.sector-tile[data-tip] {
  position: relative;
}

.sector-tile[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: #1e293b;
  color: #e2e8f0;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--t-xs);
  line-height: 1.5;
  width: max-content;
  max-width: min(260px, calc(100vw - 40px));
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.sector-tile[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Metric and rotation card tooltips */
.metric-card[data-tip],
.rotation-card[data-tip] {
  position: relative;
}

.metric-card[data-tip]::after,
.rotation-card[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: var(--t-xs);
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 9999;
  pointer-events: none;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.metric-card[data-tip]:hover::after,
.rotation-card[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1200px) {
  .macro-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .macro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #page-macro {
    padding: 4px;
  }

  .macro-grid {
    grid-template-columns: 1fr;
  }

  .macro-regime-bar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .regime-gauge {
    width: 100%;
    max-width: none;
    order: 3;
  }

  .regime-description { display: none; }

  .macro-quick-metrics,
  .macro-rotation-metrics {
    flex-wrap: wrap;
  }

  .metric-card,
  .rotation-card {
    min-width: calc(50% - 1px);
    flex: 0 0 calc(50% - 1px);
  }

  .data-strip {
    display: block;
  }

  .data-strip-label {
    display: block;
    width: 100%;
    padding: 4px 8px;
    text-align: center;
  }

  .data-strip-items {
    display: block;
    width: 100%;
  }

  .data-strip-items-inner {
    justify-content: center;
  }

  .data-item {
    padding: 4px 8px;
  }

  .sector-flex-grid {
    gap: 2px;
  }

  .sector-tile {
    min-height: 40px;
    padding: 6px 2px;
  }

  .mag7-list-header,
  .mag7-list-row {
    grid-template-columns: 38px 1fr 52px 48px;
  }

  .mag7-list-header span:nth-child(5),
  .mag7-list-header span:nth-child(6),
  .mag7-list-row .mag7-list-vol,
  .mag7-list-row .mag7-list-volratio {
    display: none;
  }
}