/* Nonfiction Labs Brand Fonts */
@font-face {
  font-family: "Residenz Grotesk Text";
  src: url("../assets/fonts/ResidenzGroteskText-TextRegular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Residenz Grotesk Text";
  src: url("../assets/fonts/ResidenzGroteskText-TextMedium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Residenz Grotesk Text";
  src: url("../assets/fonts/ResidenzGroteskText-TextSemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Residenz Grotesk Mono";
  src: url("../assets/fonts/ResidenzGroteskMono-MonoRegular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables - Nonfiction Labs Brand Colors */
:root {
  /* Dark theme (default) - Charcoal palette */
  --bg-primary: #0d0909; /* Charcoal Dark */
  --bg-secondary: #201f1f; /* Charcoal Medium */
  --bg-tertiary: #373733; /* Charcoal Light */
  --bg-card: #201f1f;
  --bg-hover: #373733;

  --text-primary: #fafafa; /* Off White */
  --text-secondary: #dce0f0; /* Blue Dark */
  --text-muted: #a5b9f1; /* Deep Blue */

  --accent-primary: #a5b9f1; /* Deep Blue */
  --accent-secondary: #dce0f0; /* Blue Dark */
  --accent-success: #4ade80;
  --accent-warning: #fbbf24;
  --accent-danger: #f87171;
  --accent-info: #60a5fa;

  --border-color: #373733; /* Charcoal Light */
  --border-radius: 10px;
  --border-radius-sm: 5px;
  --border-radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

  --sidebar-width: 280px;
  --detail-panel-width: 350px;
  --header-height: 50px;
  --filter-bar-height: 44px;

  --font-sans:
    "Residenz Grotesk Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono:
    "Residenz Grotesk Mono", "JetBrains Mono", "Fira Code", monospace;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* Light theme - Blue palette */
[data-theme="light"] {
  --bg-primary: #fafafa; /* Off White */
  --bg-secondary: #f0f2f8; /* Blue Light */
  --bg-tertiary: #edeffe; /* Blue Medium */
  --bg-card: #ffffff;
  --bg-hover: #edeffe; /* Blue Medium */

  --text-primary: #0d0909; /* Charcoal Dark */
  --text-secondary: #201f1f; /* Charcoal Medium */
  --text-muted: #373733; /* Charcoal Light */

  --accent-primary: #a5b9f1; /* Deep Blue */
  --accent-secondary: #dce0f0; /* Blue Dark */

  --border-color: #dce0f0; /* Blue Dark */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: 1.5;
}

.hidden {
  display: none !important;
}

/* Security: never show server-path "Open File" UI outside localhost / file://. */
html.no-open-file #openFileBtn {
  display: none !important;
}

/* App Container */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-header {
  height: var(--header-height);
  padding: 0 16px 0 78px; /* Extra left padding to clear macOS traffic lights */
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-app-region: drag;
  flex-shrink: 0;
}

.app-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-primary);
}

/* Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

.brand-logo .logo-icon {
  height: 88px;
  width: auto;
}

/* Dark theme: show white icon, hide charcoal */
.brand-logo .logo-dark {
  display: block;
}

.brand-logo .logo-light {
  display: none;
}

/* Light theme: show charcoal icon, hide white */
[data-theme="light"] .brand-logo .logo-dark {
  display: none;
}

[data-theme="light"] .brand-logo .logo-light {
  display: block;
}

/* Theme toggle - shown/hidden states */
[data-theme="light"] .icon-moon,
[data-theme="dark"] .icon-sun,
.icon-moon {
  display: none;
}

[data-theme="light"] .icon-sun,
[data-theme="dark"] .icon-moon {
  display: inline;
}

.sidebar-section {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-section:last-child {
  border-bottom: none;
  flex: 1;
  overflow-y: auto;
}

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

.section-header .section-title {
  margin-bottom: 0;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.row-count-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
}

/* Buttons */
.btn {
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-primary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-primary:hover {
  background: var(--text-primary);
  color: var(--bg-secondary);
  border-color: var(--bg-secondary);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--text-primary);
  color: var(--bg-secondary);
  border-color: var(--bg-secondary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--text-primary);
  color: var(--bg-secondary);
  border-color: var(--bg-secondary);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 12px;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.btn-close:hover {
  color: var(--text-primary);
}

/* Monospace button variant - matches inspiration folder style */
.btn-mono {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border-color);
}

.btn-mono:hover {
  background: var(--bg-primary);
  border-color: var(--text-primary);
}

/* Button with arrow icon */
.btn-arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-left: 4px;
}

.file-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.file-actions .btn {
  flex: 1;
  font-size: 12px;
  padding: 8px 12px;
}

/* File Browser Navigation */
.file-browser-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.file-browser-nav .btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

.current-path {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* File Browser */
.file-browser {
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  padding: 8px;
}

.file-browser-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

.file-browser-empty .hint {
  font-size: 11px;
  margin-top: 4px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
}

.file-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.file-item.directory {
  color: var(--accent-primary);
}

.file-item .icon {
  flex-shrink: 0;
}

.file-item .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loaded Files */
.loaded-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loaded-file {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 10px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.loaded-file:hover {
  background: var(--bg-hover);
}

.loaded-file.active {
  border-left: 3px solid var(--accent-primary);
  background: var(--bg-hover);
}

.loaded-file-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.loaded-file .file-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loaded-file .file-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.loaded-file-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.loaded-file:hover .loaded-file-close {
  opacity: 1;
}

.loaded-file-close:hover {
  background: var(--bg-tertiary);
  color: var(--accent-danger);
}

.empty-state {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Top Bar */
.top-bar {
  height: var(--header-height);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

/* The build indicator already pushes the right-side controls; avoid multiple auto-margins
   which can push newer buttons (Switch View / Sign Out) off-screen on narrower widths. */
.top-bar .theme-toggle {
  margin-left: 0;
}

.top-bar .auth-btn {
  -webkit-app-region: no-drag;
  white-space: nowrap;
}

.build-indicator {
  margin-left: auto;
  max-width: 420px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-app-region: no-drag;
}

.build-indicator.packaged {
  border-color: var(--accent-info);
  color: var(--text-primary);
}

.view-tabs {
  display: flex;
  gap: 4px;
  -webkit-app-region: no-drag;
}

.tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

.tab-btn:hover {
  background: var(--text-primary);
  color: var(--bg-secondary);
  border-color: var(--bg-secondary);
}

.tab-btn.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.tab-btn.active:hover {
  background: var(--text-primary);
  color: var(--bg-secondary);
  border-color: var(--bg-secondary);
}

.language-toggle {
  min-width: 56px;
}

.data-summary {
  display: flex;
  gap: 16px;
  -webkit-app-region: no-drag;
}

.summary-item {
  font-size: 12px;
  color: var(--text-muted);
}

/* Filters Bar - Compact Layout */
.filters-bar {
  height: 44px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
}

.filter-input,
.filter-select {
  padding: 6px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  height: 32px;
}

.filter-input {
  width: 160px;
}

.filter-select {
  min-width: 120px;
  cursor: pointer;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.filter-input::placeholder {
  color: var(--text-muted);
}

/* Filter badge for showing active filter count */
.filter-badge {
  display: none;
  background: var(--accent-primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

.filter-badge.active {
  display: inline;
}

/* More Filters Dropdown */
.filter-dropdown {
  position: absolute;
  top: calc(var(--header-height) + 44px + 4px);
  left: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  min-width: 280px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
}

.filter-dropdown.visible {
  display: block;
}

.filter-dropdown-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.filter-dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-dropdown-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-dropdown-row label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.filter-dropdown-row select,
.filter-dropdown-row input {
  padding: 6px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 12px;
}

.filter-dropdown-row select:focus,
.filter-dropdown-row input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.range-inputs input {
  width: 70px;
  flex: 1;
}

.range-inputs span {
  color: var(--text-muted);
  font-size: 12px;
}

/* Column Toggle Dropdown */
.column-toggle-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
}

.column-toggle-dropdown.visible {
  display: block;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 500;
}

.column-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.column-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--border-radius-sm);
}

.column-list label:hover {
  background: var(--bg-hover);
}

/* Content Views */
.content-views {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.view-panel {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.view-panel.active {
  display: flex;
  flex-direction: column;
}

/* Table View */
.table-container {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Sticky left column ("Target Name") so it's always visible while scrolling */
.data-table th.sticky-col,
.data-table td.sticky-col {
  position: sticky;
  left: 0;
  border-right: 1px solid var(--border-color);
  /* Keep content readable when it overlays other cells */
  background-clip: padding-box;
}

.data-table th.sticky-col {
  /* Ensure it sticks in BOTH directions (top + left) and stays above other headers */
  top: 0;
  left: 0;
  z-index: 30;
  background: var(--bg-secondary);
  box-shadow:
    2px 0 0 rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

.data-table td.sticky-col {
  /* Above non-sticky body cells but below the header */
  z-index: 5;
  background: var(--bg-primary);
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.08);
}

/* Keep sticky cell background aligned with row state */
.data-table tbody tr:hover td.sticky-col {
  background: var(--bg-hover);
}

.data-table tbody tr.selected td.sticky-col {
  background: var(--bg-tertiary);
}

.data-table th:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.data-table th.sorted-asc::after {
  content: " ↑";
  color: var(--accent-primary);
}

.data-table th.sorted-desc::after {
  content: " ↓";
  color: var(--accent-primary);
}

/* Table header tooltips */
.data-table th[data-tooltip] {
  position: relative;
}

.data-table th[data-tooltip]::before {
  content: "?";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.data-table th[data-tooltip]:hover::before {
  opacity: 1;
}

.data-table th[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  z-index: 10000;
  pointer-events: none;
  white-space: normal;
}

/* Light theme adjustments for table header tooltips */
[data-theme="light"] .data-table th[data-tooltip]:hover::after {
  background: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Global tooltip - JavaScript-managed tooltip that appears above all content */
.global-tooltip {
  position: fixed;
  min-width: 200px;
  max-width: 350px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  z-index: 99999;
  pointer-events: none;
  white-space: normal;
  word-wrap: break-word;
}

[data-theme="light"] .global-tooltip {
  background: var(--bg-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hide CSS-based tooltip pseudo-elements when using JS tooltips */
[data-tooltip]:hover::after {
  display: none !important;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr.selected {
  background: var(--bg-tertiary);
}

/* Score cells */
.score-cell {
  font-family: var(--font-mono);
  font-weight: 500;
}

.score-high {
  color: var(--accent-danger);
}

.score-medium {
  color: var(--accent-warning);
}

.score-low {
  color: var(--accent-success);
}

.score-unknown {
  color: var(--text-muted);
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-terminated {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.status-withdrawn {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.status-suspended {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-primary);
}

/* Boolean badges */
.bool-badge {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
}

.bool-true {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.bool-false {
  background: rgba(106, 106, 106, 0.2);
  color: var(--text-muted);
}

/* =============================================================================
   SEC Market Data Badges (Revenue, Patients, Cost)
   ============================================================================= */

/* Revenue badges */
.revenue-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.revenue-blockbuster {
  background: linear-gradient(
    135deg,
    rgba(74, 222, 128, 0.25) 0%,
    rgba(52, 211, 153, 0.15) 100%
  );
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.revenue-high {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.revenue-medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.revenue-low {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Patient count badges */
.patients-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.patients-high {
  background: rgba(74, 158, 255, 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.patients-medium {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.patients-low {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Cost per patient badges */
.cost-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.cost-premium {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.2) 0%,
    rgba(234, 88, 12, 0.15) 100%
  );
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.cost-high {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.cost-medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.cost-low {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Drug count badges */
.drug-count-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: lowercase;
}

.drug-count-high {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.drug-count-medium {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.drug-count-low {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Light theme adjustments for SEC badges */
[data-theme="light"] .revenue-blockbuster {
  background: linear-gradient(
    135deg,
    rgba(22, 163, 74, 0.15) 0%,
    rgba(22, 163, 74, 0.08) 100%
  );
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
}

[data-theme="light"] .revenue-high {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

[data-theme="light"] .cost-premium {
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.15) 0%,
    rgba(194, 65, 12, 0.1) 100%
  );
  color: #d97706;
}

/* NF Validated Badge - Table Cell */
.nf-validated-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nf-active-work-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nf-active-work-badge.active {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.nf-validated-badge.validated {
  background: rgba(74, 222, 128, 0.25);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.nf-validated-badge.invalidated {
  background: rgba(248, 113, 113, 0.25);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

.nf-validated-badge.neutral {
  background: transparent;
  color: var(--text-muted);
  opacity: 0.5;
}

/* Table Footer */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-secondary);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-info {
  font-size: 12px;
  color: var(--text-secondary);
}

.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.page-size .custom-dropdown {
  width: auto;
  min-width: 70px;
}

/* Charts View */
#chartsView {
  padding: 16px;
  overflow-y: auto;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(280px, 350px));
  gap: 16px;
  max-width: 100%;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.chart-card h3 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  flex-shrink: 0;
}

.chart-card canvas {
  flex: 1;
  min-height: 0;
  max-height: 280px;
  width: 100% !important;
  height: auto !important;
}

/* Detail Panel */
.detail-panel {
  width: var(--detail-panel-width);
  min-width: 280px;
  max-width: 800px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 100; /* Ensure tooltips in detail panel appear above main content */
  transition: transform var(--transition-normal);
}

/* Panel can be hidden with .hidden class if needed */
.detail-panel.hidden {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-left: none;
}

/* Detail Panel Toggle Button (shows when panel is hidden) */
.detail-panel-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 60px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-normal),
    background var(--transition-fast);
  z-index: 99;
}

.detail-panel-toggle:hover {
  background: var(--bg-hover);
}

.detail-panel-toggle .toggle-icon {
  font-size: 12px;
  color: var(--text-muted);
}

.detail-panel-toggle:hover .toggle-icon {
  color: var(--text-primary);
}

/* Show toggle button when detail panel is hidden */
.detail-panel.hidden + .detail-panel-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* Resize Handle */
.detail-panel-resize-handle {
  position: absolute;
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 10;
  transition: background var(--transition-fast);
}

.detail-panel-resize-handle:hover,
.detail-panel-resize-handle.dragging {
  background: var(--accent-primary);
  opacity: 0.5;
}

.detail-panel.resizing {
  transition: none;
  user-select: none;
}

body.panel-resizing {
  cursor: ew-resize !important;
  user-select: none;
}

.detail-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.detail-header h2 {
  font-size: 14px;
  font-weight: 600;
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 200px; /* Extra space for tooltips at bottom */
}

.detail-section {
  margin-bottom: 16px;
}

.detail-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-section-title:hover {
  color: var(--text-primary);
}

.detail-section-title::before {
  content: "▶";
  font-size: 8px;
  transition: transform var(--transition-fast);
}

.detail-section.expanded .detail-section-title::before {
  transform: rotate(90deg);
}

/* Section tooltip trigger (?) with hover tooltip */
.section-tooltip-trigger {
  position: relative;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: 4px;
}

.section-tooltip-trigger:hover {
  opacity: 1;
  color: var(--accent-primary);
}

.section-tooltip-trigger[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: 350px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  z-index: 10000;
  white-space: normal;
  pointer-events: none;
}

/* Info tooltip icon in section titles */
.info-tooltip {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.info-tooltip:hover {
  opacity: 1;
  color: var(--accent-primary);
}

.detail-section-content {
  display: none;
}

.detail-section.expanded .detail-section-content {
  display: block;
}

/* Retargeting Assessment Section */
.retargeting-assessment {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.assessment-score-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--border-radius);
  margin-bottom: 8px;
  border-left: 4px solid var(--border-color);
  background: var(--bg-secondary);
}

/* Assessment Banner - High potential (success/green) */
.assessment-banner-high {
  background: rgba(74, 222, 128, 0.1);
  border-left-color: var(--accent-success);
}

.assessment-banner-high .score-value {
  color: var(--accent-success);
}

/* Assessment Banner - Medium potential (warning/amber) */
.assessment-banner-medium {
  background: rgba(251, 191, 36, 0.1);
  border-left-color: var(--accent-warning);
}

.assessment-banner-medium .score-value {
  color: var(--accent-warning);
}

/* Assessment Banner - Low potential (danger/red) */
.assessment-banner-low {
  background: rgba(248, 113, 113, 0.1);
  border-left-color: var(--accent-danger);
}

.assessment-banner-low .score-value {
  color: var(--accent-danger);
}

/* Assessment Banner - Unknown potential (muted) */
.assessment-banner-unknown {
  background: var(--bg-secondary);
  border-left-color: var(--border-color);
}

.assessment-banner-unknown .score-value {
  color: var(--text-muted);
}

.score-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-mono);
}

.score-label {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}

.potential-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Potential Badge Variants */
.potential-badge-high {
  background: var(--accent-success);
  color: #0d0909;
}

.potential-badge-medium {
  background: var(--accent-warning);
  color: #0d0909;
}

.potential-badge-low {
  background: var(--accent-danger);
  color: #0d0909;
}

.potential-badge-unknown {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.assessment-classification {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.classification-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Classification Badge Variants */
.classification-badge-solid_tumor {
  background: rgba(96, 165, 250, 0.15);
  color: var(--accent-info);
}

.classification-badge-hematologic_immune {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
}

.classification-reasoning {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.assessment-components {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}

.component-score {
  display: grid;
  grid-template-columns: 140px 1fr 60px auto;
  align-items: center;
  gap: 12px;
}

.component-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.component-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.component-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Component Fill Color Variants */
.component-fill-efficacy {
  background: var(--accent-info);
}

.component-fill-toxicity {
  background: var(--accent-warning);
}

.component-fill-masking {
  background: var(--accent-success);
}

.component-value {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-align: right;
}

.component-strength {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.toxicity-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tox-category {
  padding: 10px 12px;
  border-radius: 6px;
}

.tox-category.on-target {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.tox-category.payload {
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.tox-category-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.tox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tox-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.tox-tag.on-target {
  background: rgba(16, 185, 129, 0.2);
  color: #059669;
}

.tox-tag.payload {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
  text-decoration: line-through;
}

[data-theme="light"] .tox-tag.on-target {
  color: #047857;
}

[data-theme="light"] .tox-tag.payload {
  color: #4b5563;
}

/* Light theme overrides for assessment section */
[data-theme="light"] .assessment-banner-high {
  background: rgba(74, 222, 128, 0.15);
}

[data-theme="light"] .assessment-banner-medium {
  background: rgba(251, 191, 36, 0.15);
}

[data-theme="light"] .assessment-banner-low {
  background: rgba(248, 113, 113, 0.15);
}

[data-theme="light"] .assessment-banner-unknown {
  background: var(--bg-tertiary);
}

[data-theme="light"] .potential-badge-high {
  background: #22c55e;
  color: white;
}

[data-theme="light"] .potential-badge-medium {
  background: #f59e0b;
  color: white;
}

[data-theme="light"] .potential-badge-low {
  background: #ef4444;
  color: white;
}

[data-theme="light"] .classification-badge-solid_tumor {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

[data-theme="light"] .classification-badge-hematologic_immune {
  background: rgba(168, 85, 247, 0.12);
  color: #9333ea;
}

.assessment-dlt {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 12px;
}

.dlt-item {
  margin-bottom: 4px;
}

.dlt-item:last-child {
  margin-bottom: 0;
}

.assessment-strategies {
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.strategies-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: #3b82f6;
}

.strategies-list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text-primary);
}

.strategies-list li {
  margin-bottom: 4px;
}

.assessment-rationale {
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
}

.rationale-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  color: var(--text-muted);
}

.rationale-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

.assessment-summary {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.assessment-not-available {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.assessment-icon {
  font-size: 20px;
}

/* Companies section - clickable company tags */
.companies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.company-tag.clickable {
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.company-tag.clickable:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

/* Organization type categories */
.org-type-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.org-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.org-type-tag.clickable {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.org-type-tag.clickable:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

/* Company organization groups */
.company-org-group {
  margin-bottom: 12px;
}

.company-org-group:last-child {
  margin-bottom: 0;
}

.company-org-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.detail-field {
  margin-bottom: 12px;
}

.detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.detail-value {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}

.detail-value.mono {
  font-family: var(--font-mono);
}

.detail-value a {
  color: var(--accent-primary);
  text-decoration: none;
}

.detail-value a:hover {
  text-decoration: underline;
}

/* Scores Grid Layout - Side-by-Side Display */
.detail-scores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-scores-grid .detail-field {
  margin-bottom: 0;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.detail-scores-grid .detail-label {
  margin-bottom: 4px;
}

.detail-scores-grid .detail-value {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.detail-scores-grid .detail-value.score-high {
  color: var(--accent-danger);
}

.detail-scores-grid .detail-value.score-medium {
  color: var(--accent-warning);
}

.detail-scores-grid .detail-value.score-low {
  color: var(--accent-success);
}

/* Compact boolean display in grid */
.detail-scores-grid .bool-badge {
  font-size: 11px;
  width: auto;
  height: auto;
  border-radius: var(--border-radius-sm);
  padding: 2px 8px;
}

/* Light theme adjustments for scores grid */
[data-theme="light"] .detail-scores-grid .detail-field {
  background: var(--bg-tertiary);
}

/* =============================================================================
   Key Metrics Section - Card-Based Grid Display
   ============================================================================= */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 12px 10px;
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-color);
}

.metric-card.metric-good::before {
  background: var(--accent-success);
}

.metric-card.metric-medium::before {
  background: var(--accent-warning);
}

.metric-card.metric-high::before,
.metric-card.metric-low::before {
  background: var(--accent-danger);
}

.metric-icon {
  font-size: 16px;
  margin-bottom: 4px;
  opacity: 0.8;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.metric-card.metric-good .metric-value {
  color: var(--accent-success);
}

.metric-card.metric-medium .metric-value {
  color: var(--accent-warning);
}

.metric-card.metric-high .metric-value,
.metric-card.metric-low .metric-value {
  color: var(--accent-danger);
}

.metric-card.metric-neutral .metric-value {
  color: var(--text-primary);
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Metric tooltip trigger (?) with hover tooltip */
.metric-tooltip-trigger {
  position: relative;
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.7;
}

.metric-tooltip-trigger:hover {
  opacity: 1;
  color: var(--accent-primary);
}

.metric-tooltip-trigger[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 220px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  z-index: 10000;
  white-space: normal;
  pointer-events: none;
}

/* Responsive metrics grid */
@media (max-width: 500px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Light theme adjustments for metrics */
[data-theme="light"] .metric-card {
  background: var(--bg-tertiary);
}

/* =============================================================================
   Efficacy Metrics Section - Card-Based Grid Display (Green/Success Theme)
   ============================================================================= */

/* Efficacy metrics section uses same grid but with green accent for good values */
[data-section="Efficacy Metrics"] .metric-card.metric-good::before {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

[data-section="Efficacy Metrics"] .metric-card.metric-good .metric-value {
  color: #22c55e;
}

/* Additional styling for efficacy-specific value presentation */
[data-section="Efficacy Metrics"] .metric-card {
  background: linear-gradient(
    180deg,
    var(--bg-primary) 0%,
    rgba(74, 222, 128, 0.03) 100%
  );
}

[data-section="Efficacy Metrics"] .metric-card:hover {
  background: linear-gradient(
    180deg,
    var(--bg-hover) 0%,
    rgba(74, 222, 128, 0.06) 100%
  );
}

/* Light theme adjustments for efficacy metrics */
[data-theme="light"] [data-section="Efficacy Metrics"] .metric-card {
  background: linear-gradient(
    180deg,
    var(--bg-tertiary) 0%,
    rgba(74, 222, 128, 0.05) 100%
  );
}

/* =============================================================================
   SOC (Standard of Care) Comparison Section
   ============================================================================= */

.soc-explanation {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--accent-primary);
}

.soc-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.soc-total {
  font-size: 13px;
  color: var(--text-secondary);
}

.soc-verdict {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--border-radius-sm);
}

.soc-verdict.verdict-positive {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.soc-verdict.verdict-negative {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.soc-bar-container {
  margin-bottom: 12px;
}

.soc-bar {
  display: flex;
  height: 28px;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

.soc-segment {
  height: 100%;
  min-width: 2px;
  transition: all var(--transition-fast);
  position: relative;
}

.soc-segment:hover {
  opacity: 0.85;
  transform: scaleY(1.05);
}

.soc-better {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

.soc-similar {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.soc-worse {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

.soc-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 14px;
}

.soc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.soc-legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.soc-color-better {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

.soc-color-similar {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.soc-color-worse {
  background: linear-gradient(135deg, #f87171, #ef4444);
}

.soc-legend-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.soc-legend-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.soc-detail-text {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 10px 12px;
  border-radius: var(--border-radius-sm);
  margin-top: 8px;
}

.soc-detail-text p {
  margin-bottom: 6px;
}

.soc-detail-text ul {
  margin: 0;
  padding-left: 16px;
}

.soc-detail-text li {
  margin-bottom: 3px;
  line-height: 1.4;
}

.soc-detail-text strong {
  color: var(--text-secondary);
}

/* Light theme adjustments for SOC section */
[data-theme="light"] .soc-explanation {
  background: var(--bg-tertiary);
}

[data-theme="light"] .soc-detail-text {
  background: var(--bg-tertiary);
}

/* JSON Tree View */
.json-tree {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
}

.json-key {
  color: var(--accent-secondary);
}

.json-string {
  color: var(--accent-success);
}

.json-number {
  color: var(--accent-warning);
}

.json-boolean {
  color: var(--accent-primary);
}

.json-null {
  color: var(--text-muted);
}

.json-bracket {
  color: var(--text-secondary);
}

.json-expandable {
  cursor: pointer;
}

.json-expandable:hover {
  background: var(--bg-hover);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Detail Panel Additional Styles */
.detail-header-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

/* NF Validation Status in Detail Panel (three-button selector) */
.nf-validated-field {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.nf-validation-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nf-validated-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

/* Three-button group */
.nf-validation-buttons {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nf-validation-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 2px solid;
}

/* Neutral button (?) */
.nf-validation-btn.neutral {
  background: rgba(106, 106, 106, 0.1);
  color: var(--text-muted);
  border-color: transparent;
}

.nf-validation-btn.neutral:hover {
  background: rgba(106, 106, 106, 0.2);
  border-color: rgba(106, 106, 106, 0.4);
}

.nf-validation-btn.neutral.active {
  background: rgba(106, 106, 106, 0.25);
  color: var(--text-primary);
  border-color: rgba(106, 106, 106, 0.6);
}

/* Validated button (+) - Green */
.nf-validation-btn.validated {
  background: rgba(74, 222, 128, 0.1);
  color: rgba(74, 222, 128, 0.5);
  border-color: transparent;
}

.nf-validation-btn.validated:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

.nf-validation-btn.validated.active {
  background: rgba(74, 222, 128, 0.25);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.7);
}

/* Invalidated button (-) - Red */
.nf-validation-btn.invalidated {
  background: rgba(248, 113, 113, 0.1);
  color: rgba(248, 113, 113, 0.5);
  border-color: transparent;
}

.nf-validation-btn.invalidated:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}

.nf-validation-btn.invalidated.active {
  background: rgba(248, 113, 113, 0.25);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.7);
}

/* NF Validation Notes */
.nf-validation-notes {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-notes-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  min-height: 48px;
  transition: border-color 0.15s ease;
}

.nf-notes-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.nf-notes-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.nf-notes-status {
  font-size: 11px;
  height: 14px;
  color: var(--text-muted);
  text-align: right;
}

.nf-notes-status.saved {
  color: #4ade80;
}

.nf-notes-status.error {
  color: #f87171;
}

.nf-active-work-field {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

.nf-active-work-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-active-work-buttons {
  display: flex;
  gap: 6px;
  flex: 1;
}

.nf-active-work-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.nf-active-work-btn.active.off {
  background: rgba(106, 106, 106, 0.16);
  color: var(--text-primary);
}

.nf-active-work-btn.active.on {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.nf-notion-btn {
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.nf-active-work-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nf-active-work-row .detail-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.nf-active-kd-input,
.nf-active-expression-input,
.nf-active-raw-json-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.nf-active-notion-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  transition:
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.nf-active-kd-input.disabled,
.nf-active-expression-input.disabled,
.nf-active-raw-json-input.disabled,
.nf-active-notion-input.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nf-active-status {
  font-size: 11px;
  height: 14px;
  color: var(--text-muted);
  text-align: right;
}

.nf-active-status.saved {
  color: #4ade80;
}

.nf-active-status.error {
  color: #f87171;
}

.nf-active-status.saving {
  color: #93c5fd;
}

.text-muted {
  color: var(--text-muted);
}

/* Nested Data Styles */
.nested-list {
  list-style: none;
  padding-left: 12px;
  margin: 4px 0;
}

.nested-list li {
  padding: 2px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.nested-list li::before {
  content: "•";
  color: var(--accent-primary);
  margin-right: 8px;
}

.nested-array {
  margin-top: 8px;
}

.nested-item {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}

.nested-item-header {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nested-item-header:hover {
  background: var(--bg-hover);
}

.expand-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.nested-item:not(.collapsed) .expand-icon {
  transform: rotate(90deg);
}

.nested-item-title {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
}

.nested-item-content {
  display: none;
  padding: 8px 12px;
  border-top: 1px solid var(--border-color);
}

.nested-item:not(.collapsed) .nested-item-content {
  display: block;
}

.nested-object {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nested-field {
  display: flex;
  gap: 8px;
  font-size: 11px;
}

.nested-key {
  color: var(--text-muted);
  min-width: 100px;
}

.nested-value {
  color: var(--text-primary);
  word-break: break-word;
}

.nested-value.mono {
  font-family: var(--font-mono);
}

/* JSON Tree improvements */
.json-tree {
  background: var(--bg-primary);
  padding: 12px;
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

/* Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-muted);
}

.loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px;
}

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

/* Table links */
.data-table a {
  color: var(--accent-primary);
  text-decoration: none;
}

.data-table a:hover {
  text-decoration: underline;
}

/* Filter active state */
#clearFiltersBtn.has-filters {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Sidebar drag region */
.sidebar-header {
  -webkit-app-region: drag;
}

.sidebar-header button,
.sidebar-header input {
  -webkit-app-region: no-drag;
}

/* ============================================
   Enriched Trial Dropdowns
   ============================================ */

.trials-array {
  margin-top: 8px;
}

/* Trials Section Summary */
.trials-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  margin-bottom: 12px;
}

.trials-stat {
  font-size: 11px;
  color: var(--text-secondary);
}

.trials-stat-value {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 3px;
}

.trials-status-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.trial-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.trial-status-badge.status-terminated {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.trial-status-badge.status-completed {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.trial-status-badge.status-active-not-recruiting {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-primary);
}

.trial-status-badge.status-recruiting {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.trial-status-badge.status-not-yet-recruiting {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.trial-status-badge.status-withdrawn,
.trial-status-badge.status-suspended {
  background: rgba(106, 106, 106, 0.2);
  color: var(--text-muted);
}

.trial-status-badge.status-unknown {
  background: rgba(106, 106, 106, 0.15);
  color: var(--text-muted);
}

.trial-item {
  background: var(--bg-primary);
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
}

.trial-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trial-nct-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}

.trial-nct-link:hover {
  text-decoration: underline;
}

.trial-badges {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.trial-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-fatal {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.badge-grade45 {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.badge-attr-confirmed {
  background: rgba(74, 222, 128, 0.25);
  color: var(--accent-success);
}

.badge-attr-high {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.badge-attr-medium {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.badge-attr-low {
  background: rgba(106, 106, 106, 0.2);
  color: var(--text-muted);
}

.trial-content {
  padding: 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.trial-meta {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.trial-meta-item {
  font-size: 11px;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.trial-meta-item:last-child {
  margin-bottom: 0;
}

.meta-label {
  font-weight: 600;
  color: var(--text-muted);
}

.trial-section {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.trial-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.trial-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  margin-bottom: 8px;
}

.trial-reason {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.5;
}

.trial-summary {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.trial-response-rate {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.trial-response-rate strong {
  color: var(--accent-success);
}

/* Quote styling for source excerpts */
.trial-quote {
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 10px 14px;
  border-left: 3px solid var(--accent-secondary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  margin: 8px 0;
  line-height: 1.5;
}

.trial-quote::before {
  content: '"';
  color: var(--accent-secondary);
  font-size: 14px;
  font-weight: bold;
  margin-right: 2px;
}

.trial-quote::after {
  content: '"';
  color: var(--accent-secondary);
  font-size: 14px;
  font-weight: bold;
  margin-left: 2px;
}

/* Structured efficacy citations with clickable source links */
.efficacy-citations {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.efficacy-citation-item {
  background: var(--bg-primary);
  border-left: 3px solid var(--accent-secondary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  padding: 10px 14px;
}

.citation-quote {
  font-size: 11px;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.citation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.citation-annotation {
  font-size: 10px;
  color: var(--text-muted);
  font-style: normal;
}

.citation-link {
  font-size: 10px;
  color: var(--accent-primary);
  text-decoration: none;
  padding: 2px 6px;
  border: 1px solid var(--accent-primary);
  border-radius: var(--border-radius-sm);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  display: inline-block;
}

.citation-link:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

[data-theme="light"] .efficacy-citation-item {
  background: var(--bg-tertiary);
}

/* Provenance warning for efficacy data from related literature */
.provenance-warning {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin-bottom: 8px;
  background: rgba(251, 191, 36, 0.15); /* Warning amber with low opacity */
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-warning);
}

.provenance-icon {
  font-size: 12px;
}

[data-theme="light"] .provenance-warning {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
  color: #b45309;
}

/* Trial scores row */
.trial-scores {
  display: flex;
  gap: 16px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
}

.trial-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.score-label {
  color: var(--text-muted);
  font-weight: 500;
}

.score-value {
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
}

.score-value.score-high {
  color: var(--accent-danger);
  background: rgba(248, 113, 113, 0.1);
}

.score-value.score-medium {
  color: var(--accent-warning);
  background: rgba(251, 191, 36, 0.1);
}

.score-value.score-low {
  color: var(--accent-success);
  background: rgba(74, 222, 128, 0.1);
}

/* Light theme adjustments for trial items */
[data-theme="light"] .trial-quote {
  background: var(--bg-tertiary);
}

[data-theme="light"] .trial-content {
  background: var(--bg-tertiary);
}

[data-theme="light"] .score-value {
  background: var(--bg-tertiary);
}

/* =============================================================================
   HPA Expression Section Styles
   ============================================================================= */

.hpa-gene-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.hpa-gene-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.hpa-reliability {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

.hpa-reliability-enhanced {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.hpa-reliability-supported {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-primary);
}

.hpa-reliability-approved {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.hpa-reliability-uncertain {
  background: rgba(168, 168, 168, 0.2);
  color: var(--text-secondary);
}

/* RNA-seq and GTEx reliability styles */
.hpa-reliability-rna-seq-consensus,
.hpa-reliability-gtex-rna-seq {
  background: rgba(167, 139, 250, 0.2);
  color: var(--accent-purple, #a78bfa);
}

/* Expression data source badges */
.hpa-source-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hpa-source-badge.source-ihc {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.hpa-source-badge.source-gtex {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-primary);
}

.hpa-source-badge.source-rna {
  background: rgba(167, 139, 250, 0.2);
  color: var(--accent-purple, #a78bfa);
}

.hpa-toxicity-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
}

.hpa-toxicity-warning .warning-icon {
  flex-shrink: 0;
  font-size: 14px;
}

.hpa-toxicity-warning .warning-text {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}

.hpa-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hpa-risk-section {
  margin-bottom: 12px;
}

.hpa-risk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hpa-risk-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
  font-weight: 500;
}

.hpa-tissue-section {
  margin-bottom: 16px;
}

/* Healthy tissue bar chart styles (similar to cancer expression) */
.hpa-tissue-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hpa-tissue-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hpa-tissue-bar-name {
  width: 100px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.hpa-tissue-bar-container {
  flex: 1;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-hover);
}

.hpa-tissue-bar {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-fast);
}

/* TPM column styles (side-by-side with expression bar) */
.hpa-tissue-tpm-container,
.hpa-tissue-tpm-bar-container {
  flex: 0 0 100px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-hover);
}

.hpa-tissue-tpm-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-info);
  transition: width var(--transition-fast);
}

.hpa-tissue-tpm-label {
  width: 70px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
}

.hpa-bar-tpm {
  background: var(--accent-info);
  opacity: 0.8;
}

/* Legacy secondary bar styles (kept for compatibility) */
.hpa-tissue-secondary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 2px;
}

.hpa-secondary-container {
  height: 8px;
  background: transparent;
}

.hpa-tissue-secondary-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-info);
  opacity: 0.6;
  transition: width var(--transition-fast);
}

.hpa-tissue-ntpm-label {
  width: 70px;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

.hpa-bar-secondary {
  background: var(--accent-info);
  opacity: 0.6;
}

/* Legacy grid styles (kept for compatibility) */
.hpa-tissue-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hpa-tissue-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hpa-tissue-level {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
}

.hpa-level-high {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.hpa-level-medium {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.hpa-level-low {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.hpa-tissue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hpa-tissue-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 400;
}

.hpa-badge-high {
  background: rgba(248, 113, 113, 0.15);
  color: var(--accent-danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.hpa-badge-medium {
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-warning);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.hpa-badge-low {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.hpa-tissue-more {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 4px;
}

/* =============================================================================
   Quantitative Expression Table Styles
   ============================================================================= */

.quantitative-expression-section {
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.quantitative-expression-section .hpa-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quant-info-icon {
  font-size: 12px;
  opacity: 0.7;
}

.quantitative-expression-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.quantitative-expression-table thead {
  position: sticky;
  top: 0;
  background: var(--surface-color);
}

.quantitative-expression-table th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
}

.quantitative-expression-table th:last-child {
  text-align: right;
}

.quantitative-expression-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-color-subtle);
}

.quantitative-expression-table tr:hover {
  background: var(--hover-color);
}

.quant-tissue-name {
  font-weight: 500;
  color: var(--text-primary);
}

.quant-level-cell {
  width: 80px;
}

.quant-level-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
}

.quant-level-high,
.quant-level-high .quant-level-badge {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
}

.quant-level-medium,
.quant-level-medium .quant-level-badge {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.quant-level-low,
.quant-level-low .quant-level-badge {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.quant-level-not-detected,
.quant-level-not-detected .quant-level-badge {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.quant-value {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}

.quant-more-tissues {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px;
  text-align: center;
  font-style: italic;
}

.quant-threshold-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color-subtle);
  font-size: 10px;
  color: var(--text-muted);
}

.quant-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quant-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.quant-legend-color.quant-level-high {
  background: rgba(248, 113, 113, 0.4);
}

.quant-legend-color.quant-level-medium {
  background: rgba(251, 191, 36, 0.4);
}

.quant-legend-color.quant-level-low {
  background: rgba(74, 222, 128, 0.4);
}

/* Light theme adjustments for quantitative table */
[data-theme="light"] .quantitative-expression-table th {
  background: var(--bg-secondary);
}

[data-theme="light"] .quant-level-high,
[data-theme="light"] .quant-level-high .quant-level-badge {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

[data-theme="light"] .quant-level-medium,
[data-theme="light"] .quant-level-medium .quant-level-badge {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

[data-theme="light"] .quant-level-low,
[data-theme="light"] .quant-level-low .quant-level-badge {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

.hpa-cancer-section {
  margin-top: 16px;
}

.hpa-cancer-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hpa-cancer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hpa-cancer-name {
  width: 90px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.hpa-cancer-bar {
  flex: 1;
  height: 14px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-hover);
}

.hpa-bar-segment {
  height: 100%;
  transition: width var(--transition-fast);
}

.hpa-bar-high {
  background: var(--accent-danger);
}

.hpa-bar-medium {
  background: var(--accent-warning);
}

.hpa-bar-low {
  background: var(--accent-success);
}

.hpa-bar-none {
  background: var(--text-muted);
  opacity: 0.3;
}

.hpa-cancer-pct {
  width: 32px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  flex-shrink: 0;
}

.hpa-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.hpa-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.hpa-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Light theme adjustments for HPA section */
[data-theme="light"] .hpa-toxicity-warning {
  background: rgba(248, 113, 113, 0.08);
}

[data-theme="light"] .hpa-badge-high,
[data-theme="light"] .hpa-badge-medium,
[data-theme="light"] .hpa-badge-low {
  background: rgba(0, 0, 0, 0.04);
}

/* =============================================================================
   Protein Abundance (Proteomics) Section Styles
   ============================================================================= */

.abundance-sources {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.abundance-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.abundance-source-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.abundance-source-badge.source-paxdb {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.abundance-source-badge.source-cptac {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.abundance-source-badge.source-proteomicsdb {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
}

.abundance-source-badge.source-tcpa {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
}

.abundance-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.abundance-stat-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 10px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.abundance-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
}

.abundance-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.abundance-subsection-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 12px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.abundance-tissue-badges,
.abundance-cancer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.abundance-tissue-badge,
.abundance-cancer-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  font-weight: 500;
}

.abundance-tissue-badge.high {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.abundance-cancer-badge.overexp {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.abundance-cancer-badge.underexp {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.abundance-more {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.abundance-high-tissues,
.abundance-overexpressed,
.abundance-underexpressed {
  margin-bottom: 12px;
}

.abundance-table-section {
  margin: 14px 0;
}

.abundance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.abundance-table th {
  background: var(--bg-tertiary);
  padding: 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.abundance-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
}

.abundance-table tr:hover {
  background: var(--bg-secondary);
}

.abundance-value {
  font-family: var(--font-mono);
  font-weight: 500;
}

.abundance-fc {
  font-family: var(--font-mono);
}

.abundance-fc.fc-high {
  color: #e74c3c;
  font-weight: 600;
}

.abundance-fc.fc-low {
  color: #3498db;
}

.abundance-source-mini {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
}

.abundance-source-mini.source-paxdb {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
}

.abundance-source-mini.source-cptac {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.abundance-source-mini.source-proteomicsdb {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.abundance-source-mini.source-tcpa {
  background: rgba(39, 174, 96, 0.2);
  color: #27ae60;
}

.abundance-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  background: rgba(241, 196, 15, 0.1);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(241, 196, 15, 0.3);
}

.abundance-note .note-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.abundance-note .note-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Distribution range column */
.abundance-range {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Baseline note (smaller text showing source) */
.baseline-note {
  font-size: 9px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Expression level badges */
.expression-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.expression-badge.expr-high-over {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
}

.expression-badge.expr-mod-over {
  background: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.4);
}

.expression-badge.expr-no-change {
  background: rgba(149, 165, 166, 0.2);
  color: #7f8c8d;
  border: 1px solid rgba(149, 165, 166, 0.4);
}

.expression-badge.expr-under {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.4);
}

.expression-badge.expr-strong-under {
  background: rgba(41, 128, 185, 0.25);
  color: #2980b9;
  border: 1px solid rgba(41, 128, 185, 0.5);
}

.expression-badge.expr-variable {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
  border: 1px solid rgba(155, 89, 182, 0.4);
}

/* Expression legend */
.expression-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.expression-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

.expression-legend .expression-badge {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 2px;
}

/* Cancer name in table */
.cancer-name {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sample count column */
.sample-count {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
}

/* Light theme adjustments */
[data-theme="light"] .abundance-tissue-badge.high,
[data-theme="light"] .abundance-cancer-badge.overexp {
  background: rgba(231, 76, 60, 0.1);
}

[data-theme="light"] .abundance-cancer-badge.underexp {
  background: rgba(52, 152, 219, 0.1);
}

[data-theme="light"] .abundance-note {
  background: rgba(241, 196, 15, 0.15);
}

/* =============================================================================
   Epidemiology Section Styles
   ============================================================================= */

.epid-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.epid-stat-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.epid-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 4px;
}

.epid-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.epid-primary-indication {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.epid-primary-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.epid-primary-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.epid-primary-incidence {
  font-size: 11px;
  color: var(--accent-success);
  font-family: var(--font-mono);
}

.epid-indication-table {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.epid-table-header {
  display: flex;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.epid-table-row {
  display: flex;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  transition: background var(--transition-fast);
}

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

.epid-table-row:hover {
  background: var(--bg-hover);
}

.epid-col-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epid-col-global,
.epid-col-us {
  text-align: right;
  flex-shrink: 0;
  color: var(--text-secondary);
  white-space: nowrap;
}

.epid-col-us {
  width: 84px;
}

.epid-col-global {
  width: 98px;
  text-align: right;
}

.epid-table-header .epid-col-us,
.epid-table-header .epid-col-global {
  white-space: nowrap;
}

.epid-table-header .epid-col-us[data-tooltip],
.epid-table-header .epid-col-global[data-tooltip] {
  cursor: help;
}

.epid-col-global.mono,
.epid-col-us.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

.epid-confidence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.epid-confidence.confidence-high {
  background: var(--accent-success);
}

.epid-confidence.confidence-medium {
  background: var(--accent-warning);
}

.epid-confidence.confidence-low {
  background: var(--text-muted);
}

.epid-source {
  font-size: 10px;
  color: var(--text-muted);
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}

/* Light theme adjustments for epidemiology section */
[data-theme="light"] .epid-stat-card {
  background: var(--bg-tertiary);
}

[data-theme="light"] .epid-stat-card.epid-stat-primary {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .epid-primary-indication {
  background: var(--bg-tertiary);
}

[data-theme="light"] .epid-indication-table {
  background: var(--bg-tertiary);
}

[data-theme="light"] .epid-table-header {
  background: rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   Epidemiology Breakdown Chart Styles
   ============================================================================= */

/* Color palette for indication segments */
:root {
  --epid-color-1: #4a9eff;
  --epid-color-2: #f87171;
  --epid-color-3: #34d399;
  --epid-color-4: #fbbf24;
  --epid-color-5: #a78bfa;
  --epid-color-6: #f472b6;
  --epid-color-7: #38bdf8;
  --epid-color-8: #fb923c;
  --epid-color-9: #4ade80;
  --epid-color-10: #e879f9;
}

.epid-breakdown-section {
  margin-bottom: 16px;
}

/* Dual breakdown charts layout (realistic vs bold) */
.epid-dual-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 800px) {
  .epid-dual-breakdown {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.epid-breakdown-chart-wrapper {
  display: flex;
  flex-direction: column;
}

.epid-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.epid-breakdown-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.epid-breakdown-total {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.epid-breakdown-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* Primary stat card highlight */
.epid-stat-card.epid-stat-primary {
  border: 1px solid var(--accent-color);
  background: var(--bg-secondary);
}

.epid-stat-card.epid-stat-primary .epid-stat-value {
  color: var(--accent-color);
}

.epid-breakdown-bar {
  display: flex;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.epid-breakdown-segment {
  height: 100%;
  min-width: 2px;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.epid-breakdown-segment:hover {
  opacity: 0.8;
}

.epid-breakdown-segment.confidence-exact {
  /* Solid - no pattern */
}

.epid-breakdown-segment.confidence-fuzzy {
  /* Add subtle pattern for fuzzy matches */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.1) 3px,
    rgba(0, 0, 0, 0.1) 6px
  );
  background-blend-mode: overlay;
}

.epid-breakdown-segment.confidence-unmapped {
  opacity: 0.5;
}

/* Breakdown Legend */
.epid-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  padding: 8px 0;
}

.epid-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.epid-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.epid-legend-name {
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epid-legend-percent {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 10px;
}

/* =============================================================================
   Mapping Quality Summary Styles
   ============================================================================= */

.epid-mapping-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.epid-mapping-donut {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.epid-donut-chart {
  width: 100%;
  height: 100%;
}

.epid-donut-ring {
  fill: none;
  stroke: var(--bg-tertiary);
  stroke-width: 3.5;
}

.epid-donut-segment {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

.epid-donut-exact {
  stroke: var(--accent-success);
}

.epid-donut-fuzzy {
  stroke: var(--accent-warning);
}

.epid-donut-text {
  fill: var(--text-primary);
  font-size: 8px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-anchor: middle;
}

.epid-mapping-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.epid-mapping-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.epid-mapping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.epid-dot-exact {
  background: var(--accent-success);
}

.epid-dot-fuzzy {
  background: var(--accent-warning);
}

.epid-dot-unmapped {
  background: var(--text-muted);
}

.epid-mapping-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.epid-mapping-label {
  font-size: 10px;
  color: var(--text-muted);
}

/* =============================================================================
   Enhanced Indication Table Styles
   ============================================================================= */

.epid-col-percent {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.epid-percent-bar-container {
  width: 50px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.epid-percent-bar {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-fast);
}

.epid-percent-value {
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

.epid-row-color {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 4px;
}

.epid-table-separator {
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.epid-separator-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.epid-row-unmapped {
  opacity: 0.7;
}

.epid-row-unmapped .epid-col-name {
  font-style: italic;
}

/* Update table header for new column */
.epid-table-header .epid-col-percent {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Adjust column widths for new layout */
.epid-col-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Light theme adjustments for new styles */
[data-theme="light"] .epid-breakdown-bar {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .epid-mapping-summary {
  background: var(--bg-tertiary);
}

[data-theme="light"] .epid-percent-bar-container {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .epid-donut-ring {
  stroke: rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   Market Opportunity Section Styles
   ============================================================================= */

.market-tier-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.market-tier-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.market-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.market-best-drug {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.market-drug-label {
  font-size: 11px;
  color: var(--text-muted);
}

.market-drug-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.market-modality-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}

.market-probability {
  text-align: right;
}

.market-prob-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.market-prob-label {
  font-size: 10px;
  color: var(--text-muted);
}

/* Force dark text for tier banner content (always light background) */
.market-tier-banner .market-drug-label,
.market-tier-banner .market-drug-name,
.market-tier-banner .market-prob-value,
.market-tier-banner .market-prob-label {
  color: #0d0909;
}

/* Revenue Section */
.market-revenue-section,
.market-patients-section,
.market-epidemiology-section,
.market-comparables-section {
  margin-bottom: 16px;
}

.market-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.market-revenue-grid,
.market-patients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.market-revenue-card,
.market-patient-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  text-align: center;
}

/* Highlighted key inputs shown in blue */
/* Highlight cards styled to match TAM (purple/indigo theme) */
.market-patient-card.market-patient-card-highlight {
  border: 1px solid var(--accent-primary);
  background: rgba(99, 102, 241, 0.08);
}

.market-patient-card.market-patient-card-highlight .market-patient-value {
  color: var(--accent-primary);
}

.market-patient-card.market-patient-card-highlight .market-patient-label {
  color: var(--accent-secondary);
}

.market-revenue-card.market-revenue-primary {
  background: var(--accent-primary);
  color: white;
}

.market-revenue-card.market-revenue-primary .market-revenue-label,
.market-revenue-card.market-revenue-primary .market-revenue-desc {
  color: rgba(255, 255, 255, 0.8);
}

.market-revenue-card.market-revenue-comparable {
  border: 1px solid var(--accent-success);
}

.market-revenue-card.market-revenue-risk {
  opacity: 0.8;
}

.market-revenue-card.market-revenue-tam {
  border: 1px solid var(--accent-primary);
  background: rgba(99, 102, 241, 0.08);
}

.market-revenue-card.market-revenue-tam-addressable {
  border: 1px solid var(--accent-success);
  background: rgba(74, 222, 128, 0.08);
}

.market-revenue-card.market-revenue-tam-addressable .market-revenue-value {
  color: var(--accent-success);
}

/* Full Incidence × Share styling */
.market-revenue-card.market-revenue-full-share {
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.04);
}

.market-revenue-card.market-revenue-full-share .market-revenue-value {
  color: var(--accent-primary);
  opacity: 0.85;
}

/* SOM (Addressable × Share) styling - highlighted as most relevant */
.market-revenue-card.market-revenue-som {
  border: 1px solid rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.04);
}

.market-revenue-card.market-revenue-som .market-revenue-value {
  color: var(--accent-success);
  opacity: 0.85;
}

/* NPV Full Width Row */
.market-revenue-npv-row {
  margin-top: 10px;
}

.market-revenue-card.market-revenue-npv-full {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.12) 0%,
    rgba(251, 191, 36, 0.08) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--border-radius-sm);
  padding: 16px 20px;
}

.market-revenue-npv-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.market-revenue-card.market-revenue-npv-full .market-revenue-value {
  font-size: 24px;
  font-weight: 700;
  color: #f59e0b;
  margin: 0;
}

.market-revenue-npv-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.market-revenue-card.market-revenue-npv-full .market-revenue-label {
  font-size: 13px;
  font-weight: 600;
  color: #fbbf24;
}

.market-revenue-card.market-revenue-npv-full .market-revenue-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Market card tooltip styling */
.market-revenue-card[data-tooltip],
.market-patient-card[data-tooltip] {
  position: relative;
}

.market-revenue-card[data-tooltip]:hover::after,
.market-patient-card[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  pointer-events: none;
  white-space: normal;
}

.market-revenue-value,
.market-patient-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.market-revenue-label,
.market-patient-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.market-revenue-desc {
  font-size: 9px;
  color: var(--text-muted);
}

.market-assumption-desc {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
}

.market-epidemiology-breakdown {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
}

.market-epidemiology-summary {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.market-epidemiology-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.market-epidemiology-item {
  font-size: 11px;
  line-height: 1.4;
}

.market-epidemiology-name {
  color: var(--text-primary);
  font-weight: 600;
}

.market-epidemiology-size {
  color: var(--text-secondary);
  margin-left: 4px;
}

.market-epidemiology-source {
  color: var(--text-muted);
  margin-left: 4px;
}

.market-epidemiology-source-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.market-epidemiology-source-link:hover {
  color: var(--text-secondary);
}

/* Comparable Drugs Table */
.market-comparables-table {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.market-table-header {
  display: flex;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.market-table-row {
  display: flex;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  align-items: center;
}

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

.market-table-row:hover {
  background: var(--bg-hover);
}

.market-table-row.market-row-best {
  background: rgba(74, 158, 255, 0.1);
  border-left: 3px solid var(--accent-primary);
}

.market-col-drug {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.market-drug-brand {
  font-weight: 600;
  color: var(--text-primary);
}

.market-drug-generic {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

.market-best-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  background: var(--accent-primary);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
  margin-top: 2px;
}

.market-source-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

.market-source-tag.market-source-sec {
  background: var(--accent-success);
  color: white;
}

.market-col-company {
  flex: 1;
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-col-revenue {
  width: 90px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-success);
  flex-shrink: 0;
}

/* Assumptions/Limitations Notes */
.market-notes-section {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.market-notes-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.market-notes-toggle:hover {
  background: var(--bg-hover);
}

.market-notes-icon {
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.market-notes-section.expanded .market-notes-icon {
  transform: rotate(90deg);
}

.market-notes-content {
  display: none;
  padding: 0 12px 12px 12px;
}

.market-notes-section.expanded .market-notes-content {
  display: block;
}

.market-notes-group {
  margin-bottom: 12px;
}

.market-notes-group:last-child {
  margin-bottom: 0;
}

.market-notes-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.market-notes-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.market-notes-list li {
  margin-bottom: 4px;
}

.market-notes-more {
  color: var(--text-muted);
  font-style: italic;
}

/* Light theme adjustments for market opportunity */
[data-theme="light"] .market-revenue-card,
[data-theme="light"] .market-patient-card {
  background: var(--bg-tertiary);
}

[data-theme="light"] .market-revenue-card.market-revenue-tam {
  background: rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .market-revenue-card.market-revenue-tam-addressable {
  background: rgba(74, 222, 128, 0.12);
}

[data-theme="light"] .market-revenue-card.market-revenue-full-share {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .market-revenue-card.market-revenue-som {
  background: rgba(74, 222, 128, 0.08);
}

[data-theme="light"] .market-revenue-card.market-revenue-npv-full {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(251, 191, 36, 0.1) 100%
  );
}

[data-theme="light"]
  .market-revenue-card.market-revenue-npv-full
  .market-revenue-value {
  color: #d97706;
}

[data-theme="light"]
  .market-revenue-card.market-revenue-npv-full
  .market-revenue-label {
  color: #d97706;
}

/* Light theme: highlight cards match TAM styling */
[data-theme="light"] .market-patient-card.market-patient-card-highlight {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--accent-primary);
}

[data-theme="light"]
  .market-patient-card.market-patient-card-highlight
  .market-patient-value {
  color: #6366f1;
}

[data-theme="light"]
  .market-patient-card.market-patient-card-highlight
  .market-patient-label {
  color: #818cf8;
}

[data-theme="light"] .market-revenue-card[data-tooltip]:hover::after,
[data-theme="light"] .market-patient-card[data-tooltip]:hover::after {
  background: var(--bg-tertiary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .market-comparables-table {
  background: var(--bg-tertiary);
}

[data-theme="light"] .market-table-header {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .market-notes-section {
  background: var(--bg-tertiary);
}

[data-theme="light"] .market-epidemiology-breakdown {
  background: var(--bg-tertiary);
}

[data-theme="light"] .market-table-row.market-row-best {
  background: rgba(74, 158, 255, 0.15);
}

/* =============================================================================
   Inline Array/Object Display Styles
   ============================================================================= */

.array-preview {
  color: var(--text-secondary);
}

.array-more {
  color: var(--accent-primary);
  font-size: 11px;
  margin-left: 4px;
}

.array-objects {
  font-style: italic;
}

.object-preview {
  color: var(--text-secondary);
  font-size: 12px;
}

.tox-preview {
  color: var(--accent-warning);
}

.eff-preview {
  color: var(--accent-success);
}

.payload-preview {
  color: var(--accent-primary);
  font-weight: 500;
}

/* Expandable field styles */
.expandable-field {
  position: relative;
}

.btn-expand-array {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--accent-primary);
  font-size: 10px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 6px;
  transition: all var(--transition-fast);
}

.btn-expand-array:hover {
  background: var(--accent-primary);
  color: white;
}

.btn-expand-array.expanded {
  background: var(--accent-primary);
  color: white;
}

.array-expanded-list {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.inline-expanded-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inline-expanded-list li {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
}

.expanded-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.expanded-item:last-child {
  border-bottom: none;
}

.array-inline-preview,
.object-inline-preview {
  color: var(--text-secondary);
}

/* =============================================================================
   ADC Payload Analysis Section Styles
   ============================================================================= */

.payload-header {
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.15),
    rgba(123, 104, 238, 0.15)
  );
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--border-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.payload-names {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.payload-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.payload-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
}

.payload-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.payload-class-badge {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(123, 104, 238, 0.2);
  color: var(--accent-secondary);
  font-weight: 500;
}

.payload-attribution-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.attribution-stat {
  text-align: center;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.attr-count {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.attr-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.payload-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.payload-flag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
}

.flag-target {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.flag-payload {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Payload Dropdown */
.payload-dropdown {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.payload-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.payload-dropdown-toggle:hover {
  background: var(--bg-hover);
}

.dropdown-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.payload-dropdown.expanded .dropdown-icon {
  transform: rotate(90deg);
}

.dropdown-title {
  font-weight: 600;
  color: var(--accent-primary);
  font-size: 13px;
}

.dropdown-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
}

.dropdown-count {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent-success);
  background: rgba(74, 222, 128, 0.1);
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
}

.payload-dropdown-content {
  display: none;
  padding: 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.payload-dropdown.expanded .payload-dropdown-content {
  display: block;
}

.payload-mechanism {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
}

.payload-known-tox-header {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payload-tox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payload-tox-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  transition: background var(--transition-fast);
}

.payload-tox-list li:hover {
  background: var(--bg-hover);
}

.tox-observed {
  color: var(--text-primary);
  background: rgba(74, 222, 128, 0.1);
}

.tox-observed .tox-indicator {
  color: var(--accent-success);
  font-weight: bold;
}

.tox-not-observed {
  color: var(--text-muted);
}

.tox-not-observed .tox-indicator {
  color: var(--text-muted);
}

.tox-indicator {
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
  font-size: 10px;
}

.tox-name {
  flex: 1;
  margin-left: 6px;
}

/* Toxicity List Sections */
.toxicity-list-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.tox-list-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tox-inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tox-inline-list li {
  background: var(--bg-primary);
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  border: 1px solid var(--border-color);
}

.target-tox .tox-inline-list li {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.payload-tox .tox-inline-list li {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.uncertain-tox .tox-inline-list li {
  background: rgba(168, 168, 168, 0.1);
  color: var(--text-muted);
}

.tox-expanded {
  margin-top: 8px;
}

/* Light theme adjustments for payload section */
[data-theme="light"] .payload-header {
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.1),
    rgba(123, 104, 238, 0.1)
  );
}

[data-theme="light"] .attribution-stat {
  background: var(--bg-tertiary);
}

[data-theme="light"] .payload-dropdown {
  background: var(--bg-tertiary);
}

[data-theme="light"] .payload-dropdown-content {
  background: var(--bg-secondary);
}

[data-theme="light"] .payload-mechanism {
  background: var(--bg-tertiary);
}

/* =============================================================================
   Drugs Section Styles
   ============================================================================= */

/* Main drugs section container */
.drugs-category {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--border-radius);
  background: var(--bg-tertiary);
}

.drugs-category:last-child {
  margin-bottom: 0;
}

/* Category header */
.drugs-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.drugs-category-icon {
  font-size: 16px;
}

.drugs-category-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.drugs-category-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Target-directed drugs section (prominent) */
.drugs-target-directed {
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.15),
    rgba(74, 222, 128, 0.1)
  );
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.drugs-target-directed .drugs-category-title {
  color: var(--accent-primary);
}

/* Combination drugs section (muted) */
.drugs-combination {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.drugs-combination .drugs-category-title {
  color: var(--text-secondary);
}

/* Drug lists */
.drugs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drugs-list-combo {
  gap: 8px;
}

/* Individual drug item (for target-directed) */
.drug-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  flex-wrap: wrap;
}

.drug-item-target {
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.2);
}

.drug-item-target .drug-name {
  color: var(--accent-primary);
  font-weight: 500;
}

.drug-name {
  font-size: 13px;
  color: var(--text-primary);
}

.drug-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 10px;
}

.drug-target-badge {
  font-size: 10px;
  color: var(--accent-success);
  background: rgba(74, 222, 128, 0.15);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
}

/* Modality badges */
.drug-modality-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  text-transform: uppercase;
}

.modality-adc {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.modality-mab {
  background: rgba(74, 158, 255, 0.2);
  color: #4a9eff;
}

.modality-tce {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.modality-bispecific {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.modality-chemo {
  background: rgba(168, 168, 168, 0.2);
  color: var(--text-secondary);
}

.modality-small {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

.modality-fusion {
  background: rgba(244, 114, 182, 0.2);
  color: #f472b6;
}

.modality-immuno {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.modality-other {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Drug targets badge - shows all targets for the drug (important for bispecifics) */
.drug-targets-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  margin-left: 4px;
  letter-spacing: 0.3px;
}

/* Highlight multispecific targets differently */
.drug-targets-badge[title*="bispecific"],
.drug-targets-badge[title*="multispecific"] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

/* Conditional Activation Badges (Probodies, pH-sensitive, etc.) */
.conditional-activation-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid;
  margin-left: 4px;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.conditional-platform-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--border-radius-sm);
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  margin-left: 4px;
  font-style: italic;
}

/* Drug card styling for conditionally activated drugs */
.drug-detail-card.drug-conditionally-activated {
  border-left: 3px solid #10b981;
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.05) 0%,
    transparent 50%
  );
}

/* Light theme conditional activation */
[data-theme="light"] .conditional-activation-badge {
  opacity: 0.9;
}

[data-theme="light"] .conditional-platform-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

[data-theme="light"] .drug-detail-card.drug-conditionally-activated {
  border-left-color: #059669;
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.08) 0%,
    transparent 50%
  );
}

/* Light theme targets badge */
[data-theme="light"] .drug-targets-badge {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

[data-theme="light"] .drug-targets-badge[title*="bispecific"],
[data-theme="light"] .drug-targets-badge[title*="multispecific"] {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
}

/* Antibody format badge (IgG1, Fab, scFv, etc.) */
.drug-format-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15),
    rgba(59, 130, 246, 0.15)
  );
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
  letter-spacing: 0.3px;
}

/* Light theme format badge */
[data-theme="light"] .drug-format-badge {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.1),
    rgba(59, 130, 246, 0.1)
  );
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.25);
}

/* Inline drug items (for combination drugs grouped by modality) */
.drugs-modality-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}

.drugs-modality-group:last-child {
  border-bottom: none;
}

.drugs-modality-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  min-width: 90px;
}

.drug-item-inline {
  font-size: 12px;
  padding: 3px 8px;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
}

.drug-item-combo {
  border: 1px solid var(--border-color);
}

.drug-count-inline {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* =============================================================================
   Drug Detail Cards (Enhanced ChEMBL Integration)
   ============================================================================= */

.drug-detail-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid rgba(74, 158, 255, 0.2);
  margin-bottom: 8px;
}

.drug-detail-card:last-child {
  margin-bottom: 0;
}

.drug-detail-card.drug-tsab-only {
  border-color: rgba(168, 85, 247, 0.25);
}

.drug-card-tsab-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.drug-tsab-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--border-radius-sm);
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.25);
  font-weight: 500;
}

.drug-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drug-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drug-card-title-row .drug-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-primary);
}

.drug-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drug-molecule-type {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
}

/* ChEMBL Actions Row */
.drug-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.drug-chembl-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--border-radius-sm);
  color: var(--accent-primary);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.2s ease;
}

.drug-chembl-link:hover {
  background: rgba(74, 158, 255, 0.2);
  border-color: rgba(74, 158, 255, 0.5);
  transform: translateY(-1px);
}

.chembl-icon {
  font-size: 14px;
}

.chembl-id {
  font-family: var(--font-mono);
  font-size: 11px;
}

.external-link-icon {
  font-size: 10px;
  opacity: 0.7;
}

/* Biocomponents Download Button */
.drug-biocomponents-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: var(--border-radius-sm);
  color: #34d399;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drug-biocomponents-btn:hover {
  background: rgba(52, 211, 153, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  transform: translateY(-1px);
}

.drug-biocomponents-btn .download-icon {
  font-size: 14px;
}

.drug-biocomponents-btn .btn-text {
  font-weight: 500;
}

/* Drug Description Section */
.drug-description-section {
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.drug-description-preview {
  color: var(--text-muted);
}

.drug-description-full {
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.btn-expand-desc {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-expand-desc:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Biocomponents Preview */
.drug-biocomponents-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
}

.biocomponents-label {
  color: var(--text-muted);
  font-weight: 500;
}

.biocomponent-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: var(--border-radius-sm);
  color: #a78bfa;
  font-size: 10px;
  font-family: var(--font-mono);
}

.biocomponents-more {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* Additional drug metadata block */
.drug-extra-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
}

.drug-extra-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.drug-extra-label {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 110px;
}

.drug-extra-value {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Light theme adjustments for drug detail cards */
[data-theme="light"] .drug-detail-card {
  background: var(--bg-secondary);
  border-color: rgba(74, 158, 255, 0.15);
}

[data-theme="light"] .drug-chembl-link {
  background: rgba(74, 158, 255, 0.08);
  border-color: rgba(74, 158, 255, 0.25);
}

[data-theme="light"] .drug-biocomponents-btn {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
}

[data-theme="light"] .drug-description-section {
  background: var(--bg-card);
}

[data-theme="light"] .drug-extra-details {
  background: var(--bg-card);
}

[data-theme="light"] .biocomponent-chip {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.25);
}

/* =============================================================================
   Drug Market Data Styles (SEC Revenue, CMS ASP Pricing, Patient Estimates)
   ============================================================================= */

.drug-market-data {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(
    135deg,
    rgba(74, 222, 128, 0.08) 0%,
    rgba(52, 211, 153, 0.05) 100%
  );
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: var(--border-radius-md);
}

.market-data-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-success);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
}

.market-data-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.market-data-row:last-child {
  margin-bottom: 0;
}

.market-label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 95px;
}

.market-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.market-value-large {
  font-size: 14px;
  color: #4ade80;
}

.market-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.market-source-link {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.25);
  border-radius: var(--border-radius-sm);
  color: var(--accent-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  margin-left: auto;
}

.market-source-link:hover {
  background: rgba(74, 158, 255, 0.2);
  border-color: rgba(74, 158, 255, 0.4);
}

.market-source-tag {
  font-size: 9px;
  padding: 2px 5px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: var(--border-radius-sm);
  color: #a78bfa;
  font-family: var(--font-mono);
}

.market-confidence {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
}

.market-confidence.confidence-high {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.market-confidence.confidence-medium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Light theme market data */
[data-theme="light"] .drug-market-data {
  background: linear-gradient(
    135deg,
    rgba(22, 163, 74, 0.08) 0%,
    rgba(22, 163, 74, 0.04) 100%
  );
  border-color: rgba(22, 163, 74, 0.25);
}

[data-theme="light"] .market-data-header {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}

[data-theme="light"] .market-value-large {
  color: #16a34a;
}

/* =============================================================================
   Drug Binding Affinity Data Styles (Kd, Ki, IC50, EC50)
   ============================================================================= */

.drug-binding-data {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(
    135deg,
    rgba(165, 185, 241, 0.12) 0%,
    rgba(139, 92, 246, 0.08) 100%
  );
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(165, 185, 241, 0.25);
}

.binding-data-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(165, 185, 241, 0.15);
}

.binding-values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.binding-value-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.binding-type {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.binding-value {
  font-size: 13px;
  font-weight: 600;
  color: #a78bfa;
  font-family: var(--font-mono);
}

.binding-target-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.binding-label {
  font-size: 10px;
  color: var(--text-muted);
}

.binding-target {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.binding-sources-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.binding-source-tag {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
}

.btn-expand-binding {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--accent-primary);
  background: rgba(165, 185, 241, 0.1);
  border: 1px solid rgba(165, 185, 241, 0.2);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-expand-binding:hover {
  background: rgba(165, 185, 241, 0.2);
  border-color: rgba(165, 185, 241, 0.3);
}

.binding-measurements-list {
  margin-top: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-sm);
  max-height: 200px;
  overflow-y: auto;
}

.binding-measurement {
  display: grid;
  grid-template-columns: 50px 80px 1fr 60px;
  gap: 8px;
  padding: 4px 0;
  font-size: 10px;
  border-bottom: 1px solid rgba(165, 185, 241, 0.1);
}

.binding-measurement:last-child {
  border-bottom: none;
}

.meas-type {
  font-weight: 600;
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.meas-value {
  font-weight: 500;
  color: #a78bfa;
  font-family: var(--font-mono);
}

.meas-target {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meas-source {
  color: var(--text-muted);
  text-align: right;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* Light theme binding data */
[data-theme="light"] .drug-binding-data {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08) 0%,
    rgba(139, 92, 246, 0.04) 100%
  );
  border-color: rgba(139, 92, 246, 0.25);
}

[data-theme="light"] .binding-data-header {
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .binding-value {
  color: #7c3aed;
}

[data-theme="light"] .binding-source-tag {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

[data-theme="light"] .meas-value {
  color: #7c3aed;
}

[data-theme="light"] .binding-measurements-list {
  background: rgba(139, 92, 246, 0.05);
}

/* =============================================================================
   SEC Market Data Section Styles (subsection within Market Opportunity)
   ============================================================================= */

.market-sec-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.sec-subsection-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.sec-market-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.sec-market-card {
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--border-radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.sec-market-card.sec-market-revenue {
  background: linear-gradient(
    135deg,
    rgba(74, 222, 128, 0.1) 0%,
    rgba(74, 222, 128, 0.05) 100%
  );
  border-color: rgba(74, 222, 128, 0.3);
}

.sec-market-card.sec-market-patients {
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.1) 0%,
    rgba(74, 158, 255, 0.05) 100%
  );
  border-color: rgba(74, 158, 255, 0.3);
}

.sec-card-icon {
  font-size: 24px;
  line-height: 1;
}

.sec-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sec-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.sec-market-revenue .sec-card-value {
  color: #4ade80;
}

.sec-market-patients .sec-card-value {
  color: var(--accent-primary);
}

.sec-card-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.sec-card-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.sec-drug-breakdown {
  margin-top: 8px;
}

.sec-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.sec-drugs-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-drug-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.sec-drug-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sec-drug-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.sec-drug-company {
  font-size: 10px;
  color: var(--text-muted);
}

.sec-drug-metrics {
  display: flex;
  gap: 16px;
}

.sec-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.sec-metric-value {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.sec-metric-revenue .sec-metric-value {
  color: #4ade80;
}

.sec-metric-price .sec-metric-value {
  color: #fbbf24;
  font-size: 11px;
}

.sec-metric-patients .sec-metric-value {
  color: var(--accent-primary);
}

.sec-metric-label {
  font-size: 9px;
  color: var(--text-muted);
}

.sec-filing-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.25);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-size: 10px;
  color: var(--accent-primary);
  transition: all 0.15s ease;
}

.sec-filing-link:hover {
  background: rgba(74, 158, 255, 0.2);
  border-color: rgba(74, 158, 255, 0.4);
}

.sec-filing-icon {
  font-size: 12px;
}

.sec-filing-text {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Light theme SEC market data */
[data-theme="light"] .sec-market-revenue .sec-card-value {
  color: #16a34a;
}

[data-theme="light"] .sec-metric-revenue .sec-metric-value {
  color: #16a34a;
}

/* =============================================================================
   Trial Drug Display Styles (in trial items)
   ============================================================================= */

.trial-drug {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  margin: 1px 2px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.trial-drug-target {
  background: rgba(74, 158, 255, 0.15);
  color: var(--accent-primary);
  font-weight: 500;
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.trial-drug-chemo {
  background: rgba(168, 168, 168, 0.1);
  color: var(--text-muted);
}

.trial-drug-small {
  background: rgba(52, 211, 153, 0.1);
  color: var(--text-secondary);
}

.trial-drug-other {
  background: transparent;
  color: var(--text-muted);
  padding: 2px 4px;
}

.drug-type-indicator {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 2px;
}

.drug-type-adc {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.drug-type-mab {
  background: rgba(74, 158, 255, 0.2);
  color: #4a9eff;
}

/* Light theme adjustments for drugs section */
[data-theme="light"] .drugs-target-directed {
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.1),
    rgba(74, 222, 128, 0.08)
  );
  border-color: rgba(74, 158, 255, 0.25);
}

[data-theme="light"] .drugs-combination {
  background: var(--bg-tertiary);
}

[data-theme="light"] .drug-item {
  background: var(--bg-secondary);
}

[data-theme="light"] .drug-item-target {
  background: rgba(74, 158, 255, 0.08);
}

[data-theme="light"] .trial-drug {
  background: var(--bg-tertiary);
}

[data-theme="light"] .trial-drug-target {
  background: rgba(74, 158, 255, 0.1);
}

/* Responsive */
@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: 220px;
  }

  .detail-panel {
    width: 280px;
  }

  .filters-bar {
    flex-wrap: wrap;
    height: auto;
    padding: 12px;
    gap: 12px;
  }
}

/* ==========================================
   Error Log Bar
   ========================================== */

.suppress-error-log-ui #errorLogBar,
.suppress-error-log-ui #openErrorLogBtn {
  display: none !important;
}

.error-log-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  transition: max-height var(--transition-normal);
}

.error-log-bar.collapsed {
  max-height: 36px;
}

.error-log-bar.hidden {
  display: none;
}

.error-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--bg-tertiary);
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
}

.error-log-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.error-icon {
  font-size: 14px;
  color: var(--text-muted);
}

.error-count-badge {
  background: var(--accent-danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.error-count-badge.zero {
  background: var(--text-muted);
}

.error-log-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-log-actions .btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

#toggleErrorLogBtn {
  transition: transform var(--transition-fast);
}

.error-log-bar.collapsed #toggleErrorLogBtn {
  transform: rotate(180deg);
}

.error-log-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  max-height: 250px;
}

.error-log-bar.collapsed .error-log-content {
  display: none;
}

.error-log-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}

.error-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error-log-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--accent-danger);
}

.error-log-item.warning {
  border-left-color: var(--accent-warning);
}

.error-log-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.error-log-timestamp {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.error-log-source {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-log-message {
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  word-break: break-word;
  white-space: pre-wrap;
}

.error-log-stack {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 6px 8px;
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 100px;
  overflow-y: auto;
}

/* Light theme adjustments for error log */
[data-theme="light"] .error-log-bar {
  border-top-color: var(--border-color);
}

[data-theme="light"] .error-log-header {
  background: var(--bg-tertiary);
}

[data-theme="light"] .error-log-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-left: 3px solid #dc2626;
}

[data-theme="light"] .error-count-badge {
  background: #dc2626;
}

/* =============================================================================
   Magnetic Masking Feasibility Section
   ============================================================================= */

.masking-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.masking-badge {
  padding: 4px 12px;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.masking-badge-good {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
  border: 1px solid var(--accent-success);
}

.masking-badge-moderate {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
  border: 1px solid var(--accent-warning);
}

.masking-badge-partial {
  background: rgba(96, 165, 250, 0.2);
  color: var(--accent-info, #60a5fa);
  border: 1px solid var(--accent-info, #60a5fa);
}

.masking-badge-inherent {
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-warning);
  border: 1px solid var(--accent-warning);
}

.masking-badge-poor {
  background: rgba(248, 113, 113, 0.2);
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger);
}

.masking-score {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.masking-datasource {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: help;
}

.masking-ds-specific {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.masking-ds-generic {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-tertiary);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .masking-ds-specific {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .masking-ds-generic {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.3);
}

.masking-reason {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Overlap and inherent toxicity info blocks */
.masking-overlap-info {
  padding: 12px;
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  margin-bottom: 12px;
}

.masking-overlap-info.masking-overlap-partial {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid var(--accent-info, #60a5fa);
  color: var(--text-primary);
}

.masking-overlap-info .overlap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--accent-info, #60a5fa);
}

.masking-overlap-info .info-icon {
  font-size: 16px;
}

.masking-overlap-info .overlap-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 24px;
}

.masking-overlap-info .overlap-excluded,
.masking-overlap-info .overlap-included {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.masking-overlap-info .overlap-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.masking-overlap-info .overlap-values {
  color: var(--text-primary);
}

.masking-overlap-info .overlap-excluded .overlap-values {
  color: var(--accent-danger);
  opacity: 0.85;
}

/* Inherent toxicity info block */
.masking-overlap-info.masking-inherent-info {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--text-primary);
}

.masking-inherent-info .overlap-header {
  color: var(--accent-warning);
}

.masking-inherent-info .inherent-detail {
  font-size: 12px;
  line-height: 1.5;
}

.masking-inherent-info .inherent-label {
  font-weight: 600;
  color: var(--accent-warning);
}

.masking-inherent-info .inherent-organs {
  font-weight: 600;
}

.masking-inherent-info .avoidable-detail {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
  color: var(--text-secondary);
}

.masking-indication-summary {
  margin-bottom: 12px;
}

.masking-indication-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.masking-indication-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  padding: 12px;
}

.masking-indication-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name ratio"
    "organ ratio";
  gap: 2px 8px;
  margin-bottom: 10px;
}

.masking-indication-name {
  grid-area: name;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.masking-indication-organ {
  grid-area: organ;
  font-size: 12px;
  color: var(--text-secondary);
}

.masking-indication-ratio {
  grid-area: ratio;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.masking-indication-ratio.ratio-good {
  color: var(--accent-success);
}
.masking-indication-ratio.ratio-moderate {
  color: var(--accent-warning);
}
.masking-indication-ratio.ratio-poor {
  color: var(--accent-danger);
}

.masking-indication-ratio-sub {
  font-size: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.3;
}

.masking-placement-ratios {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
}

.masking-placement-ratios-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.masking-placement-ratio-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.masking-placement-ratio-row + .masking-placement-ratio-row {
  margin-top: 4px;
}

.masking-placement-ratio-name {
  color: var(--text-secondary);
}

.masking-placement-ratio-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.masking-placement-ratio-na {
  color: var(--text-muted);
  font-weight: 500;
  font-family: var(--font-sans);
}

.masking-comparison {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.masking-organ-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.masking-organ-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.masking-organ-names {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.masking-activation-bar {
  position: relative;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.masking-bar-fill {
  height: 100%;
  border-radius: var(--border-radius-sm);
  transition: width var(--transition-normal);
}

.masking-bar-target {
  background: linear-gradient(90deg, var(--accent-success), #22c55e);
}

.masking-bar-toxicity {
  background: linear-gradient(90deg, var(--accent-danger), #ef4444);
}

.masking-bar-value {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.masking-ratio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.masking-ratio-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.masking-ratio-value {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.masking-ratio-value.ratio-good {
  color: var(--accent-success);
}

.masking-ratio-value.ratio-moderate {
  color: var(--accent-warning);
}

.masking-ratio-value.ratio-poor {
  color: var(--accent-danger);
}

.masking-ratio-explanation {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.masking-config {
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  padding: 12px;
}

.masking-avoidable-breakdown {
  margin: -2px 0 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-card);
}

.masking-avoidable-breakdown-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.masking-avoidable-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.masking-avoidable-row + .masking-avoidable-row {
  margin-top: 4px;
}

.masking-avoidable-organ {
  color: var(--text-secondary);
}

.masking-avoidable-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.masking-config-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.masking-config-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.config-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.config-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* Light theme adjustments for masking section */
[data-theme="light"] .masking-badge-good {
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
  border-color: #22c55e;
}

[data-theme="light"] .masking-badge-moderate {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
  border-color: #eab308;
}

[data-theme="light"] .masking-badge-partial {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
  border-color: #3b82f6;
}

[data-theme="light"] .masking-badge-inherent {
  background: rgba(202, 138, 4, 0.15);
  color: #92400e;
  border-color: #ca8a04;
}

[data-theme="light"] .masking-badge-poor {
  background: rgba(220, 38, 38, 0.15);
  color: #b91c1c;
  border-color: #dc2626;
}

[data-theme="light"] .masking-overlap-info.masking-overlap-partial {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

[data-theme="light"] .masking-overlap-info.masking-inherent-info {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.4);
}

[data-theme="light"] .masking-inherent-info .overlap-header {
  color: #92400e;
}

[data-theme="light"] .masking-inherent-info .inherent-label {
  color: #92400e;
}

[data-theme="light"] .masking-overlap-info .overlap-header {
  color: #1d4ed8;
}

[data-theme="light"] .masking-bar-value {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .masking-ratio-value.ratio-good {
  color: #15803d;
}

[data-theme="light"] .masking-ratio-value.ratio-moderate {
  color: #a16207;
}

[data-theme="light"] .masking-ratio-value.ratio-poor {
  color: #b91c1c;
}

/* Toxicity Breakdown Section */
.masking-toxicity-breakdown {
  margin-top: 16px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.breakdown-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.breakdown-row.breakdown-inherent,
.breakdown-row.breakdown-na {
  opacity: 0.7;
}

.breakdown-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.breakdown-system {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.breakdown-events {
  font-size: 11px;
  color: var(--text-muted);
}

.breakdown-organ {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.breakdown-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.breakdown-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.reduction-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-normal);
}

.reduction-fill.reduction-high {
  background: linear-gradient(90deg, var(--accent-success), #22c55e);
}

.reduction-fill.reduction-medium {
  background: linear-gradient(90deg, var(--accent-warning), #f59e0b);
}

.reduction-fill.reduction-low {
  background: linear-gradient(90deg, var(--accent-danger), #ef4444);
}

.breakdown-spillover {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.breakdown-reduction {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

.breakdown-reduction.reduction-high {
  color: var(--accent-success);
}

.breakdown-reduction.reduction-medium {
  color: var(--accent-warning);
}

.breakdown-reduction.reduction-low {
  color: var(--accent-danger);
}

.breakdown-status {
  grid-column: 3 / 5;
  text-align: right;
}

.status-inherent {
  font-size: 11px;
  color: var(--accent-warning);
  font-style: italic;
}

.status-na {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Masking ratio cell in data table */
.masking-ratio-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
}

.masking-ratio-cell.ratio-good {
  color: var(--accent-success);
  background: rgba(74, 222, 128, 0.15);
}

.masking-ratio-cell.ratio-moderate {
  color: var(--accent-warning);
  background: rgba(251, 191, 36, 0.15);
}

.masking-ratio-cell.ratio-poor {
  color: var(--accent-danger);
  background: rgba(248, 113, 113, 0.15);
}

/* Light theme adjustments for toxicity breakdown */
[data-theme="light"] .breakdown-reduction.reduction-high {
  color: #15803d;
}

[data-theme="light"] .breakdown-reduction.reduction-medium {
  color: #a16207;
}

[data-theme="light"] .breakdown-reduction.reduction-low {
  color: #b91c1c;
}

[data-theme="light"] .masking-ratio-cell.ratio-good {
  color: #15803d;
  background: rgba(22, 163, 74, 0.15);
}

[data-theme="light"] .masking-ratio-cell.ratio-moderate {
  color: #a16207;
  background: rgba(234, 179, 8, 0.15);
}

[data-theme="light"] .masking-ratio-cell.ratio-poor {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.15);
}

/* Incidence/epidemiology cells */
.incidence-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

[data-theme="light"] .incidence-cell {
  color: var(--text-secondary);
}

/* =============================================================================
   Drug Groups Section - Trials grouped by investigational drug
   ============================================================================= */

.drug-groups-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.drug-groups-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.drug-groups-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.drug-groups-stat-fatal {
  color: var(--accent-danger);
}

.drug-groups-stat-fatal .drug-groups-stat-value {
  color: var(--accent-danger);
}

.drug-groups-stat-severe {
  color: var(--accent-warning);
}

.drug-groups-stat-severe .drug-groups-stat-value {
  color: var(--accent-warning);
}

.drug-groups-stat-dates {
  color: var(--text-secondary);
}

.drug-groups-stat-dates .drug-groups-stat-value {
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

/* Trial Timeline Section - Histogram of trials over time */
.trial-timeline-section {
  margin-bottom: 24px;
  padding: 12px 12px 16px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--border-radius);
}

.trial-timeline-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trial-timeline-chart-container {
  position: relative;
  width: 100%;
  max-height: 220px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 10px;
}

.trial-timeline-chart-container canvas {
  width: 100% !important;
  height: auto !important;
}

.drug-groups-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Drug Group Section - Individual drug container */
.drug-group-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.drug-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-tertiary);
  transition: background var(--transition-fast);
}

.drug-group-header:hover {
  background: var(--bg-hover);
}

.drug-group-expand-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  width: 12px;
}

.drug-group-section.expanded .drug-group-expand-icon {
  transform: rotate(90deg);
}

.drug-group-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Modality badges */
.drug-modality-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modality-adc {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.modality-tce {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

.modality-bispecific {
  background: rgba(6, 182, 212, 0.2);
  color: #06b6d4;
}

.modality-mab {
  background: rgba(74, 158, 255, 0.2);
  color: var(--accent-primary);
}

/* Drug targets badge - shows all targets for the drug (important for bispecifics) */
.drug-targets-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  margin-left: 4px;
  letter-spacing: 0.3px;
}

/* Highlight multispecific targets differently */
.drug-targets-badge[title*="bispecific"],
.drug-targets-badge[title*="multispecific"] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.drug-group-trial-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.drug-group-halt-count {
  font-size: 11px;
  color: var(--accent-warning);
}

.drug-group-fatal-badge,
.drug-group-severe-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
}

.drug-group-fatal-badge {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger);
}

.drug-group-severe-badge {
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-warning);
}

/* Drug Group Content - Expandable area */
.drug-group-content {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.drug-group-section.expanded .drug-group-content {
  display: block;
}

.drug-group-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  margin-bottom: 14px;
}

.drug-stat {
  font-size: 12px;
}

.drug-stat-label {
  color: var(--text-muted);
  margin-right: 4px;
}

.drug-stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* Drug Pattern Analysis Section */
.drug-pattern-analysis {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  margin-bottom: 14px;
}

.drug-pattern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.drug-pattern-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.drug-pattern-confidence {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.drug-pattern-confidence.confidence-high {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.drug-pattern-confidence.confidence-medium {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.drug-pattern-confidence.confidence-low {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.drug-pattern-item {
  margin-bottom: 8px;
  font-size: 12px;
}

.drug-pattern-item .pattern-label {
  font-weight: 600;
  margin-right: 6px;
}

.drug-pattern-item.drug-specific .pattern-label {
  color: var(--accent-danger);
}

.drug-pattern-item.target-related .pattern-label {
  color: var(--accent-success);
}

.drug-pattern-item.hypothesis .pattern-label {
  color: var(--accent-primary);
}

.drug-pattern-item .pattern-value {
  color: var(--text-secondary);
}

.drug-pattern-summary {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
}

/* Drug Trials Section */
.drug-trials-section {
  margin-top: 12px;
}

.drug-trials-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.drug-trials-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drug-trial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  transition: background var(--transition-fast);
}

.drug-trial-item:hover {
  background: var(--bg-hover);
}

.drug-trial-nct {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}

.drug-trial-nct:hover {
  text-decoration: underline;
}

.drug-trial-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  font-weight: 500;
}

.drug-trial-tox-score {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.drug-trial-date {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: var(--border-radius-sm);
}

.trial-severity-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  font-weight: 600;
}

.trial-severity-badge.fatal {
  background: rgba(239, 68, 68, 0.2);
  color: var(--accent-danger);
}

.trial-severity-badge.grade45 {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.trial-severity-badge.hold {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.drug-trial-tier {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  margin-left: auto;
}

.drug-trial-tier.tier-confirmed_high,
.drug-trial-tier.tier-high {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.drug-trial-tier.tier-medium {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.drug-trial-tier.tier-low {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

/* Expandable drug trial items (matching Clinical Trials section detail) */
.drug-trial-item-expandable {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
}

.drug-trial-item-expandable .drug-trial-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  transition: background var(--transition-fast);
}

.drug-trial-item-expandable .drug-trial-header:hover {
  background: var(--bg-hover);
}

.drug-trial-item-expandable .expand-icon {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.drug-trial-item-expandable:not(.collapsed) .expand-icon {
  transform: rotate(90deg);
}

.drug-trial-item-expandable .drug-trial-content {
  display: none;
  padding: 12px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.1);
}

.drug-trial-item-expandable:not(.collapsed) .drug-trial-content {
  display: block;
}

/* Trial meta, sections, scores within drug trial expandable - inheriting trial-item styles */
.drug-trial-content .trial-meta {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.drug-trial-content .trial-meta-item {
  font-size: 12px;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drug-trial-content .meta-label {
  color: var(--text-muted);
  font-weight: 500;
  min-width: 70px;
}

.drug-trial-content .trial-section {
  margin-bottom: 12px;
}

.drug-trial-content .trial-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.drug-trial-content .trial-reason {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.drug-trial-content .trial-summary {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.drug-trial-content .trial-quote {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--accent-secondary);
  padding-left: 12px;
  margin: 8px 0;
  line-height: 1.5;
}

.drug-trial-content .efficacy-citation-item {
  padding: 8px 12px;
}

.drug-trial-content .citation-quote {
  color: var(--text-muted);
}

.drug-trial-content .trial-response-rate {
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.drug-trial-content .trial-scores {
  display: flex;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.drug-trial-content .trial-score {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drug-trial-content .score-label {
  font-size: 11px;
  color: var(--text-muted);
}

.drug-trial-content .score-value {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.drug-trial-content .score-high {
  color: var(--accent-danger);
}

.drug-trial-content .score-medium {
  color: var(--accent-warning);
}

.drug-trial-content .score-low {
  color: var(--accent-success);
}

/* Drug badges in expandable trial content */
.drug-trial-content .trial-drug {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
  font-size: 11px;
}

.drug-trial-content .trial-drug-target {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.drug-trial-content .trial-drug-chemo {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
}

.drug-trial-content .drug-type-indicator {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
}

.drug-trial-content .drug-type-mab {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-primary);
}

.drug-trial-content .drug-type-adc {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

/* Light theme adjustments */
[data-theme="light"] .drug-trial-content {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .drug-trial-content .trial-drug-target {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

/* Light theme adjustments for drug groups */
[data-theme="light"] .modality-adc {
  background: rgba(168, 85, 247, 0.15);
  color: #7c3aed;
}

[data-theme="light"] .modality-tce {
  background: rgba(236, 72, 153, 0.15);
  color: #db2777;
}

[data-theme="light"] .modality-bispecific {
  background: rgba(6, 182, 212, 0.15);
  color: #0891b2;
}

[data-theme="light"] .drug-pattern-confidence.confidence-high {
  background: rgba(22, 163, 74, 0.15);
  color: #15803d;
}

[data-theme="light"] .drug-pattern-confidence.confidence-medium {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

[data-theme="light"] .trial-severity-badge.fatal {
  background: rgba(220, 38, 38, 0.15);
  color: #b91c1c;
}

[data-theme="light"] .trial-severity-badge.grade45 {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

[data-theme="light"] .trial-severity-badge.hold {
  background: rgba(124, 58, 237, 0.15);
  color: #6d28d9;
}

/* ==========================================
   Sidebar Filters
   ========================================== */

.sidebar-section-file {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-section-filters {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Important for flex children to shrink properly */
}

.sidebar-filters-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0; /* Allow shrinking */
}

.btn-full-width {
  width: 100%;
}

/* Sidebar filter groups */
.sidebar-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.sidebar-filter-sublabel {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.sidebar-filter-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
}

.sidebar-filter-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.sidebar-filter-input::placeholder {
  color: var(--text-muted);
}

.sidebar-filter-input-sm {
  padding: 8px 12px;
  font-size: 13px;
}

.sidebar-filter-select {
  width: 100%;
  padding: 8px 12px;
  padding-right: 32px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A5B9F1' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.sidebar-filter-select:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.sidebar-filter-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.sidebar-filter-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 8px;
}

/* Custom Dropdown Component - matches ghost button styling */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-toggle {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
  text-align: left;
}

.custom-dropdown-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.custom-dropdown.open .custom-dropdown-toggle {
  border-color: var(--accent-primary);
}

.custom-dropdown-arrow {
  font-size: 10px;
  transition: transform var(--transition-fast);
  opacity: 0.7;
}

.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.custom-dropdown.open .custom-dropdown-menu {
  display: block;
}

.custom-dropdown-option {
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.custom-dropdown-option:hover {
  background: var(--bg-hover);
}

.custom-dropdown-option.selected {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* Dropup variant - opens upward for bottom-positioned dropdowns */
.custom-dropdown.dropup .custom-dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

/* Compact variant for inline use */
.custom-dropdown.compact .custom-dropdown-toggle {
  padding: 6px 10px;
  padding-right: 28px;
}

.custom-dropdown.compact .custom-dropdown-option {
  padding: 6px 10px;
}

.sidebar-filter-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.sidebar-filter-row:last-child {
  margin-bottom: 0;
}

.sidebar-filter-input-num {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font-mono);
}

.sidebar-filter-input-num:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.sidebar-filter-input-num::placeholder {
  color: var(--text-muted);
}

.range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-inputs input {
  flex: 1;
  min-width: 0;
}

.range-separator {
  color: var(--text-muted);
  font-size: 12px;
}

.sidebar-filter-actions {
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--bg-secondary);
}

.sidebar-filter-actions .btn {
  font-size: 12px;
}

.sidebar-filter-actions .btn.has-filters {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Checkbox styling */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.checkbox-label {
  font-size: 13px;
  color: var(--text-primary);
  user-select: none;
}

/* Company Tree */
.company-tree {
  max-height: 250px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px;
}

.company-tree .empty-state {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 8px;
}

/* Organization type groups (Academic, Government, Industry, etc.) */
.company-org-type-group {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.company-org-type-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.company-org-type-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  background: var(--bg-secondary);
}

.company-org-type-header:hover {
  background: var(--bg-hover);
}

.company-org-type-header .checkbox-label {
  font-weight: 600;
}

.company-org-type-items {
  padding-left: 8px;
  margin-top: 4px;
}

.company-group {
  margin-bottom: 4px;
}

.company-group:last-child {
  margin-bottom: 0;
}

.company-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

.company-group-header:hover {
  background: var(--bg-hover);
}

.company-group-toggle {
  width: 16px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
  user-select: none;
}

.company-group-checkbox {
  flex: 1;
  padding: 0;
}

.company-group-checkbox .checkbox-label {
  font-size: 12px;
  font-weight: 500;
}

.company-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.company-group-items {
  padding-left: 20px;
  margin-top: 2px;
}

.company-item {
  padding: 3px 4px;
  border-radius: var(--border-radius-sm);
}

.company-item:hover {
  background: var(--bg-hover);
}

.company-item .checkbox-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.company-item input[type="checkbox"]:checked + .checkbox-label {
  color: var(--text-primary);
}

.company-ungrouped {
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  padding-top: 8px;
}

/* Partial selection state for group checkbox */
.company-group-checkbox input[type="checkbox"].partial {
  opacity: 0.6;
}

/* Top Actions Bar (minimal) */
.top-actions-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}

/* Scrollbar styling for company tree */
.company-tree::-webkit-scrollbar {
  width: 6px;
}

.company-tree::-webkit-scrollbar-track {
  background: transparent;
}

.company-tree::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.company-tree::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Scrollbar styling for sidebar filters */
.sidebar-filters-scrollable::-webkit-scrollbar {
  width: 6px;
}

.sidebar-filters-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-filters-scrollable::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.sidebar-filters-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Light theme adjustments for sidebar filters */
[data-theme="light"] .sidebar-filter-input,
[data-theme="light"] .sidebar-filter-input-num {
  background-color: var(--bg-card);
}

[data-theme="light"] .sidebar-filter-select {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23373733' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="light"] .sidebar-filter-select:hover {
  background-color: var(--bg-hover);
}

[data-theme="light"] .custom-dropdown-menu {
  background: var(--bg-card);
}

[data-theme="light"] .custom-dropdown-option.selected {
  background: var(--bg-tertiary);
}

[data-theme="light"] .company-tree {
  background: var(--bg-card);
}

/* =============================================================================
   Source Links & Key Publications
   ============================================================================= */

/* Trial source links section */
.trial-sources {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.trial-sources .trial-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.source-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.source-link-buttons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.source-btn {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition:
    opacity 0.15s,
    transform 0.1s;
}

.source-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.doi-btn {
  background: #e3f2fd;
  color: #1565c0;
}

.pubmed-btn {
  background: #fff3e0;
  color: #e65100;
}

.pmc-btn {
  background: #e8f5e9;
  color: #2e7d32;
}

.source-title {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-more {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* Key Publications Section */
.publications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.publication-item {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.pub-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}

.pub-links {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.pub-link-btn {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition:
    opacity 0.15s,
    transform 0.1s;
}

.pub-link-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.pub-link-btn.doi-link {
  background: #e3f2fd;
  color: #1565c0;
}

.pub-link-btn.pubmed-link {
  background: #fff3e0;
  color: #e65100;
}

.pub-link-btn.pmc-link {
  background: #e8f5e9;
  color: #2e7d32;
}

.pub-cited-in,
.pub-findings {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.pub-cited-label,
.pub-findings-label {
  font-weight: 500;
  margin-right: 4px;
}

.pub-trial-tag {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-secondary);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-primary);
  margin-right: 4px;
}

.pub-finding-tag {
  display: inline-block;
  padding: 1px 5px;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: 9px;
  color: var(--text-secondary);
  margin-right: 4px;
  text-transform: uppercase;
}

.pub-more {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
  text-align: center;
}

/* Light theme adjustments for source links */
[data-theme="light"] .source-btn,
[data-theme="light"] .pub-link-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .doi-btn,
[data-theme="light"] .pub-link-btn.doi-link {
  background: #bbdefb;
  color: #0d47a1;
}

[data-theme="light"] .pubmed-btn,
[data-theme="light"] .pub-link-btn.pubmed-link {
  background: #ffe0b2;
  color: #bf360c;
}

[data-theme="light"] .pmc-btn,
[data-theme="light"] .pub-link-btn.pmc-link {
  background: #c8e6c9;
  color: #1b5e20;
}

[data-theme="light"] .publication-item {
  background: var(--bg-hover);
}

[data-theme="light"] .pub-trial-tag {
  background: var(--bg-tertiary);
}

/* =============================================================================
   Assessment Detailed Reasoning (collapsible)
   ============================================================================= */

.assessment-confidence-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 6px;
}

.assessment-confidence-badge.confidence-high {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.assessment-confidence-badge.confidence-medium {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.assessment-confidence-badge.confidence-low {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.assessment-reasoning-details {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.assessment-reasoning-details[open] {
  background: var(--bg-primary);
}

.reasoning-toggle {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  cursor: pointer;
  user-select: none;
  background: var(--bg-secondary);
}

.reasoning-toggle:hover {
  background: var(--bg-tertiary);
}

.reasoning-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reasoning-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reasoning-badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.reasoning-badge.spatial-pattern {
  background: rgba(167, 139, 250, 0.2);
  color: var(--accent-purple, #a78bfa);
}

.reasoning-badge.localization-mode {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-primary);
}

.reasoning-block {
  padding: 0;
}

.reasoning-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.reasoning-paragraph {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

.reasoning-findings {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

.reasoning-findings li {
  margin-bottom: 3px;
}

/* =============================================================================
   Epidemiology Context Notes & Compartment Summary
   ============================================================================= */

.epid-context-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 4px 0;
}

.epid-compartment-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.epid-compartment-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
}

.epid-compartment-badge {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 500;
}

/* =============================================================================
   HPA Gene Metadata
   ============================================================================= */

.ensembl-link {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-primary);
  text-decoration: none;
  font-family: monospace;
  font-weight: 500;
}

.ensembl-link:hover {
  background: rgba(59, 130, 246, 0.3);
  text-decoration: underline;
}

.hpa-gene-description {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
  line-height: 1.4;
}

.hpa-specificity-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

/* =============================================================================
   Protein Abundance Fold Changes
   ============================================================================= */

.abundance-source-badge.source-quantitative {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.abundance-fold-changes {
  margin: 12px 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.abundance-fold-changes > summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  cursor: pointer;
  background: var(--bg-secondary);
}

.abundance-fold-changes > summary:hover {
  background: var(--bg-tertiary);
}

.fold-change-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.fold-change-table th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.fold-change-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.fold-change-table tr.fold-up td {
  color: var(--accent-success);
}

.fold-change-table tr.fold-down td {
  color: #ef4444;
}

.fold-change-table tr.fold-neutral td {
  color: var(--text-muted);
}

.fold-change-indicator {
  text-align: center;
  font-weight: bold;
  width: 30px;
}

/* =============================================================================
   Combination Partner Analysis Section
   ============================================================================= */

.combo-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.combo-stat-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.combo-stat-card.combo-stat-warning {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.combo-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.combo-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-top: 2px;
}

.combo-elevated,
.combo-partners,
.combo-partner-group {
  margin-bottom: 10px;
}

.combo-subsection-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 6px;
  cursor: default;
}

.combo-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.combo-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.combo-badge-elevated {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.combo-badge-cpi {
  background: rgba(167, 139, 250, 0.2);
  color: var(--accent-purple, #a78bfa);
}

.combo-badge-chemo {
  background: rgba(251, 191, 36, 0.2);
  color: var(--accent-warning);
}

.combo-badge-baseline {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.combo-badge-more {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-style: italic;
}

.combo-stat-card.combo-stat-mono-signal {
  border-color: var(--accent-warning);
  background: rgba(251, 191, 36, 0.1);
}

.combo-stat-card.combo-stat-mono-signal .combo-stat-value {
  color: var(--accent-warning);
}

.combo-baseline,
.combo-elevated {
  margin-bottom: 10px;
}

.combo-comparisons-details {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.combo-comparisons-details > summary {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--accent-primary);
  cursor: pointer;
  background: var(--bg-secondary);
}

.combo-comparisons-details > summary:hover {
  background: var(--bg-tertiary);
}

.combo-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.combo-comparison-table th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.combo-comparison-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.combo-comparison-table tr.combo-row-elevated {
  background: rgba(239, 68, 68, 0.08);
}

.combo-comparison-table tr.combo-row-elevated td {
  color: #ef4444;
}

/* =============================================================================
   Expression-Toxicity Analysis Section
   ============================================================================= */

.expr-tox-summary-stat {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.expr-tox-assessment {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
  margin-bottom: 12px;
}

.expr-tox-group {
  margin-bottom: 10px;
}

.expr-tox-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.expr-tox-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.expr-tox-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.expr-tox-badge.expr-tox-related {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-success);
}

.expr-tox-badge.expr-tox-unrelated {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.expr-tox-badge.expr-tox-uncertain {
  background: rgba(251, 191, 36, 0.15);
  color: var(--accent-warning);
}

.expr-tox-correlations-details {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.expr-tox-correlations-details > summary {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--accent-primary);
  cursor: pointer;
  background: var(--bg-secondary);
}

.expr-tox-correlations-details > summary:hover {
  background: var(--bg-tertiary);
}

.expr-tox-correlations-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expr-tox-correlation-item {
  padding: 8px 10px;
  border-radius: 4px;
  border-left: 3px solid var(--border-color);
  background: var(--bg-primary);
}

.expr-tox-correlation-item.expr-corr-related {
  border-left-color: var(--accent-success);
}

.expr-tox-correlation-item.expr-corr-unrelated {
  border-left-color: var(--text-muted);
}

.expr-tox-correlation-item.expr-corr-uncertain {
  border-left-color: var(--accent-warning);
}

.expr-corr-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}

.expr-corr-tissues {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
}

.expr-corr-confidence {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  margin-left: 6px;
  text-transform: uppercase;
  font-weight: 600;
}

.expr-corr-reasoning {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* Light theme adjustments for new sections */

[data-theme="light"] .combo-stat-card {
  background: var(--bg-tertiary);
}

[data-theme="light"] .combo-stat-card.combo-stat-warning {
  background: rgba(239, 68, 68, 0.05);
}

[data-theme="light"] .assessment-reasoning-details[open] {
  background: var(--bg-tertiary);
}

[data-theme="light"] .expr-tox-correlation-item {
  background: var(--bg-tertiary);
}

[data-theme="light"] .fold-change-table tr.fold-up td {
  color: #16a34a;
}

[data-theme="light"] .combo-comparison-table tr.combo-row-elevated td {
  color: #dc2626;
}

/* =================================================================
   Antibody Database Section
   ================================================================= */

.ab-db-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ab-db-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ab-db-badge strong {
  font-weight: 700;
}

.ab-db-badge-therasabdab {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ab-db-badge-plabdab {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ab-db-badge-plabdab-nano {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.08));
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.ab-db-total {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.ab-db-synonyms {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.ab-db-synonyms-label {
  font-weight: 600;
  margin-right: 4px;
}

.ab-db-synonyms-list {
  word-break: break-word;
}

/* Download buttons */
.ab-db-download-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--accent-primary);
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}

.ab-db-download-all-btn {
  margin-left: auto;
}

.ab-db-download-btn:hover {
  background: var(--accent-primary);
  color: #fff;
}

/* Source entries (collapsible) */
.ab-db-source-section {
  margin-top: 8px;
}

.ab-db-source-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}

.ab-db-source-toggle:hover {
  background: var(--bg-tertiary);
}

.ab-db-entry-count {
  font-size: 11px;
  color: var(--text-muted);
}

.toggle-icon {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.ab-db-entries-list {
  padding: 8px;
  border: 1px solid var(--border-primary);
  border-top: none;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Entry cards */
.ab-db-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
  padding: 10px 12px;
  transition: border-color 0.15s;
}

.ab-db-card:hover {
  border-color: var(--accent-primary);
}

.ab-db-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ab-db-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ab-db-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

a.ab-db-card-name {
  color: var(--accent-primary);
}

a.ab-db-card-name:hover {
  text-decoration: underline;
}

.ab-db-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.ab-db-card-meta-text {
  font-size: 11px;
  color: var(--text-muted);
}

.ab-db-card-ref {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

/* Extra info row (alt names, companies) */
.ab-db-card-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.4;
}

.ab-db-card-extra-label {
  color: var(--text-muted);
  font-weight: 600;
}

.ab-db-card-extra-text {
  color: var(--text-secondary);
}

/* Sequence count badge in header */
.ab-db-seq-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Bispecific badge */
.ab-db-bispecific-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--border-radius-sm);
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* CDR sequence chips */
.ab-db-cdr-chips {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}

.ab-db-cdr-chip {
  font-size: 8px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
  cursor: help;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}

/* Per-card components row */
.ab-db-card-components {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-primary);
}

.ab-db-card-comp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ab-db-card-fasta-btn {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--accent-primary);
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}

.ab-db-card-fasta-btn:hover {
  background: var(--accent-primary);
  color: #fff;
}

.ab-db-seq-indicator {
  font-size: 10px;
  color: #34d399;
}

.ab-db-truncation-notice {
  font-size: 11px;
  color: var(--text-warning, #b8860b);
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.2);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0 2px;
  line-height: 1.5;
}

.ab-db-truncation-notice a {
  color: var(--link-color, #5b9bd5);
  text-decoration: underline;
}

.ab-db-truncation-icon {
  font-size: 13px;
}

/* Validation / pairing badges */
.ab-db-pairing-badge, .ab-db-clinical-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ab-db-pairing-xtal {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.ab-db-pairing-tsab {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.ab-db-pairing-other {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.ab-db-status-approved {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ab-db-status-clinical {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Light theme overrides */
[data-theme="light"] .ab-db-badge-therasabdab {
  color: #2563eb;
}

[data-theme="light"] .ab-db-badge-plabdab {
  color: #059669;
}

[data-theme="light"] .ab-db-badge-plabdab-nano {
  color: #7c3aed;
}

[data-theme="light"] .ab-db-pairing-xtal {
  color: #d97706;
}

[data-theme="light"] .ab-db-status-approved {
  color: #059669;
}

[data-theme="light"] .ab-db-status-clinical {
  color: #4f46e5;
}