/* styles.css — standalone stylesheet for the marketing research tool.
   Only the generic shared classes + CSS variables the Opportunity markup and
   opp.js actually reference were pulled from the source dashboard. No maps, no
   charts, no Tailwind — this tool is tables-only. */

:root {
  --navy:   #1e3a5f;
  --teal:   #1a7fa0;
  --green:  #2e7d32;
  --red:    #c62828;
  --amber:  #e65100;
  --bg:     #f4f6f9;
  --card:   #ffffff;
  --border: #dde3ea;
  --text:   #1a2432;
  --muted:  #6b7a8d;
  --gold:   #b8860b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Header */
header {
  background: var(--bg);
  color: var(--navy);
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 { font-size: 18px; font-weight: 600; color: var(--navy); }
header .subtitle { font-size: 12px; color: var(--muted); }

main { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }

/* Tab panel (single panel in this standalone tool) */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Section headers */
.sec {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin: 22px 0 12px;
  border-left: 3px solid var(--navy);
  padding-left: 10px;
}

/* Tables (generic, used by the rendered opp tables) */
table { width: 100%; border-collapse: collapse; font-size: 13px; }

/* Sub-tabs */
.clin-sub {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  border-radius: 7px;
  transition: background .12s, color .12s;
}
.clin-sub.active { background: var(--navy); color: #fff; }
.clin-sub:hover:not(.active) { background: #f4f6f9; color: var(--navy); }