/* PAIOS v6.1 — Investment Dashboard styles.
   Plain CSS custom properties + Grid/Flexbox, no framework, per
   dashboard-html-architecture.md's design (no build-tool dependency
   this platform's bash-only Runtime doesn't otherwise need). */

:root {
  --color-bg: #0f1115;
  --color-panel: #181b22;
  --color-panel-border: #262b35;
  --color-text: #e7e9ee;
  --color-text-dim: #9aa1ad;
  --color-gain: #3ecf8e;
  --color-loss: #ef5a5a;
  --color-stale: #e8b339;
  --color-fresh: #3ecf8e;
  --color-accent: #5b8cff;
  --radius: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

.app-header {
  padding: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-panel-border);
  flex-wrap: wrap;
}
.app-header h1 { margin: 0; font-size: 1.4rem; }
.header-summary { color: var(--color-text-dim); font-size: 1rem; }
.header-summary .neg { color: var(--color-loss); }
.header-summary .pos { color: var(--color-gain); }
.header-summary .stale { color: var(--color-stale); }

.dashboard-grid {
  display: grid;
  grid-template-areas: "top" "middle" "bottom";
  gap: var(--space-4);
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.zone-top { grid-area: top; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.zone-middle { grid-area: middle; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.zone-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

@media (max-width: 900px) {
  .zone-top, .zone-middle, .zone-bottom { grid-template-columns: 1fr; }
}

/* v10.0: tab layout matching the real IOS dashboard's 3-tab structure. */
.tabbar {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-panel-border);
  max-width: 1200px;
  margin: 0 auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab-btn:hover { color: var(--color-text); }

.tab-panel {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.tab-panel.active { display: grid; }

@media (max-width: 900px) {
  .tab-panel { grid-template-columns: 1fr; }
}

.widget {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.widget h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}

.widget table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.widget th, .widget td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-panel-border); }
.widget th { color: var(--color-text-dim); font-weight: 500; }

.pnl-pos { color: var(--color-gain); }
.pnl-neg { color: var(--color-loss); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; }
.badge-stale { background: rgba(232,179,57,0.15); color: var(--color-stale); }
.badge-fresh { background: rgba(62,207,142,0.15); color: var(--color-fresh); }
.badge-alert { background: rgba(239,90,90,0.15); color: var(--color-loss); }

.alert-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-1) 0; }

.allocation-bar-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: 0.85rem; }
.allocation-bar-track { flex: 1; height: 8px; background: var(--color-panel-border); border-radius: 4px; overflow: hidden; }
.allocation-bar-fill { height: 100%; background: var(--color-accent); }
.allocation-label { width: 160px; flex-shrink: 0; color: var(--color-text-dim); }
.allocation-pct { width: 48px; text-align: right; flex-shrink: 0; }

.app-footer {
  padding: var(--space-4);
  color: var(--color-text-dim);
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid var(--color-panel-border);
}
.app-footer code { background: var(--color-panel); padding: 1px 5px; border-radius: 4px; }

.error-banner {
  background: rgba(239,90,90,0.15);
  border: 1px solid var(--color-loss);
  color: var(--color-loss);
  padding: var(--space-3);
  border-radius: var(--radius);
  margin: var(--space-4);
}

/* v10.3 — migrated verbatim from IOS_Daily_Dashboard.html's inline <style>
   (class names unchanged: narrative-card, sentiment-tag, highlight-row,
   highlight-ticker, highlight-type, highlight-note, empty-state), values
   remapped onto PAIOS's own CSS custom properties rather than IOS's
   --surface-2/--border/--text-dim/--text-faint (which don't exist here). */
.narrative-card { background: var(--color-panel); border: 1px solid var(--color-panel-border); border-radius: 8px; padding: 14px 16px; margin-bottom: 0.5rem; }
.narrative-card .theme { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.narrative-card .detail { font-size: 13px; color: var(--color-text-dim); line-height: 1.55; }
.sentiment-tag { font-size: 10px; font-family: 'JetBrains Mono', monospace; padding: 2px 8px; border-radius: 20px; letter-spacing: .04em; margin-left: 8px; vertical-align: middle; background: var(--color-panel-border); }
.sentiment-Bullish { color: var(--color-gain); }
.sentiment-Bearish { color: var(--color-loss); }
.sentiment-Mixed { color: var(--color-stale); }
.highlight-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-panel-border); }
.highlight-row:last-child { border-bottom: none; }
.highlight-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; min-width: 56px; }
.highlight-type { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 3px; }
.highlight-note { font-size: 13px; color: var(--color-text-dim); line-height: 1.5; }
.empty-state { color: var(--color-text-dim); font-size: 13px; font-family: 'JetBrains Mono', monospace; padding: 10px 0; }