@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Navigation ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  transition: all 0.15s;
  text-decoration: none;
}
.nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
.nav-link.active {
  background: rgba(224, 160, 84, 0.2);
  color: #e0a054;
}

/* ── Level badges ── */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.soc-badge  { background: #fee2e2; color: #b91c1c; }
.hlgt-badge { background: #f3e8ff; color: #7c3aed; }
.hlt-badge  { background: #dbeafe; color: #1d4ed8; }
.pt-badge   { background: #dcfce7; color: #15803d; }
.llt-badge  { background: #f1f5f9; color: #475569; }

/* ── Quick action cards ── */
.quick-card {
  display: block;
  padding: 28px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* ── Buttons ── */
.btn-primary {
  background: #b8722e;
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #9c5f26; }

.btn-secondary {
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: #e2e8f0; }

/* ── MedDRA browser-style tree ── */
.meddra-tree { font-family: system-ui, sans-serif; }
.tree-row { position: relative; }

/* Vertical connector: runs full height of each row's left gutter */
.tree-row .connector-v {
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #cbd5e1;
}
/* Horizontal elbow line into the node */
.tree-row .connector-h {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: #cbd5e1;
  vertical-align: middle;
  margin-right: 4px;
}

/* Public-tier teaser: NEVER the real MedDRA term — the API already nulls it server-side
   (see filter_for_tier). This is always a fake filler string, blurred purely for visual
   effect (curiosity hook toward upgrading), so there is nothing real to leak via
   view-source, inspect element, copy/paste, or disabling this stylesheet. */
.term-locked {
  filter: blur(4px);
  user-select: none;
  cursor: default;
  color: #94a3b8;
}
.dark .term-locked { color: #64748b; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Typography ── */
body { font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; }
code { font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', monospace; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }

/* ── Dark theme overrides for hardcoded-hex classes ── */
/* .btn-primary (blue), .level-badge variants (bright pastels), and .quick-card
   (colorful gradients) already read fine on a dark background — only
   .btn-secondary's light-grey fill needs a dark counterpart. */
.dark .btn-secondary {
  background: #1a2224;
  color: #cbd5e1;
  border-color: rgba(201, 162, 39, 0.4);
}
.dark .btn-secondary:hover { background: #232d2f; }