/* Theme tokens copied from the real bundle's stylesheet (assets/index-DRx_5fLh.css),
   converted from its HSL custom properties + the literal hex colors it uses.
   Original tokens (for reference):
     --background: 0 0% 98%        --foreground: 250 52% 12%
     --card / --popover: 0 0% 100% --border: 245 18% 86%
     --primary: 184 100% 35%       --secondary/--muted/--accent: ~245 20-32% 94-95%
     --muted-foreground: 248 11% 45%   --destructive: 24 100% 48%
     --chart-1..5: teal / orange / deep indigo / amber / purple
     --font-sans: Geist            --font-mono: "JetBrains Mono"
     --radius: .15rem (the original UI uses near-square corners, not rounded pills)
   Plus literal colors found directly in the CSS: #250073 (banner), #f26700 (top stripe),
   #dc2626 (down-regulation red), #9ca3af / #e5e7eb (neutral borders/text). */

:root {
  --background: #fafafa;
  --foreground: #140f2e;
  --card: #ffffff;
  --border: #d8d6e0;
  --muted: #ececf1;
  --muted-foreground: #6b6a78;
  --primary: #00a6b3;       /* hsl(184 100% 35%) - the teal "Choose CSV" button */
  --primary-foreground: #fafafa;
  --accent: #ededf5;
  --destructive: #f56200;   /* hsl(24 100% 48%) */
  --banner: #250073;        /* literal color used for the top banner */
  --stripe: #f26700;        /* literal color used for the thin orange stripe */
  --down-regulated: #dc2626;
  --chart-teal: #00a6b3;    /* chart-1 */
  --chart-orange: #f56200;  /* chart-2 */
  --chart-indigo: #1c0070;  /* chart-3 */
  --chart-amber: #e0a100;   /* chart-4 */
  --chart-purple: #6736c9;  /* chart-5 */
  --radius: 0.15rem;        /* the real UI is nearly square-cornered, not pill-shaped */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Geist", "Inter", Arial, sans-serif;
  color: var(--foreground);
  background: var(--background);
}

.banner {
  background: var(--banner);
  color: #ffffff;
  padding: 10px 20px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 3px solid var(--stripe);
}
.banner a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}
.banner a:hover { color: var(--stripe); }

header.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.title-bar-text { display: flex; align-items: baseline; gap: 10px; }
header.title-bar h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  color: var(--banner);
}
header.title-bar p { margin: 0; color: var(--muted-foreground); font-size: 13px; }

.title-bar-logos { display: flex; align-items: center; gap: 16px; }
.title-bar-logos img { height: 48px; width: auto; display: block; border-radius: var(--radius); }

main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px 24px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.panel h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.panel .hint { margin: 0 0 12px; color: var(--muted-foreground); font-size: 12px; }

button, input[type="file"]::file-selector-button {
  font: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--foreground);
}
button.primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  font-weight: 600;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.stat-card .label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
.stat-card .value { font-size: 26px; font-weight: 700; margin: 4px 0; }
.stat-card .sub { font-size: 12px; color: var(--muted-foreground); }

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}
#export-csv-button-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  border-radius: 999px;
  font-weight: 600;
  padding: 8px 16px;
}
#export-csv-button-inline:disabled { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }

.download-outputs-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.download-outputs-panel h2 { margin-bottom: 2px; }
.download-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.download-buttons button { border-radius: 999px; }

.status-bar::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  margin-right: 8px;
}

.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
canvas { width: 100%; }

.pathway-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pathway-tabs button.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.pathway-caption { font-size: 12px; color: var(--muted-foreground); margin: 0 0 8px; }
.pathway-legend { font-size: 11px; color: var(--muted-foreground); margin: 8px 0 0; }

/* The pathway image and its highlight overlay must stay perfectly aligned
   as the image scales - the wrapper is the positioning context, and each
   highlight box is placed in percentages of the image's natural size. */
.pathway-image-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  background: #ffffff;
}
.pathway-image { display: block; width: 100%; height: auto; }
.pathway-highlight {
  position: absolute;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: help;
}

/* Tooltip shown on hover over a scatter-plot point (positioned by JS). */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--foreground);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip strong { font-weight: 600; }

.chart-canvas-wrapper { position: relative; }

.results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.results-table th, .results-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--muted); }
.results-table th { color: var(--muted-foreground); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.results-table th.sortable-column { cursor: pointer; user-select: none; }
.results-table th.sortable-column:hover { color: var(--foreground); }
.results-table th.sorted-column { color: var(--primary); }
.results-empty { color: var(--muted-foreground); font-size: 13px; }

/* Show roughly the first 20 matched markers; the rest scroll into view.
   The header stays pinned so column names remain visible while scrolling. */
#results-table-container {
  max-height: 680px;
  overflow: auto;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
}
#results-table-container .results-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--muted);
}
/* Keep each matched-marker row to a single compact line so ~20 fit in the
   window; the long Cell / Evidence text is truncated with an ellipsis (full
   value on hover via the cell's title attribute). */
#results-table-container .results-table td,
#results-table-container .results-table th {
  white-space: nowrap;
  padding-top: 5px;
  padding-bottom: 5px;
}
#results-table-container .results-table td:nth-child(7) {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Original UI's prediction badges are solid pills colored per cell-death class
   (chart palette); strength badges are quieter outlined pills. */
.prediction-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}
.strength-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  background: var(--card);
}
.strength-badge.strength-strong { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, white); }
.strength-badge.strength-weak { color: var(--muted-foreground); }

/* "Direct" = gene sits in the cell-death pathway itself; "Indirect" = it
   influences cell death without being part of the pathway (Updated marker
   table's "Type" column). Quiet pills so they read as metadata. */
.gene-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border);
}
.gene-type-badge.gene-type-direct { color: var(--chart-indigo); border-color: var(--chart-indigo); background: color-mix(in srgb, var(--chart-indigo) 8%, white); }
.gene-type-badge.gene-type-indirect { color: var(--chart-purple); border-color: var(--chart-purple); background: color-mix(in srgb, var(--chart-purple) 8%, white); }
.gene-type-badge.gene-type-unknown { color: var(--muted-foreground); }

textarea {
  width: 100%;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}
input[type="range"] { width: 100%; accent-color: var(--primary); }
input[type="search"] { font: inherit; }

/* ---- GO Enrichment panel ------------------------------------------------ */
.go-mode-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.go-mode-tab {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--muted);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  bottom: -2px;
}
.go-mode-tab.active {
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  border-color: var(--border);
  border-bottom-color: var(--card);
}
.go-panel-run-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.go-panel-run-row button {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.go-panel-run-row button:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.go-status-line { min-height: 18px; }
.go-charts-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Each enrichment plot renders at its native size (900px wide; height grows
   with the number of terms). This frame keeps that full-resolution plot
   legible and scrolls to reveal it, instead of squishing it to fit the panel:
   horizontal scroll when the panel is narrower than the plot, vertical scroll
   when there are many terms. */
.go-chart-scroll {
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}
/* Override the global `canvas { width: 100% }` so the plot is NOT scaled down
   to the panel width (which is what made it look squished). It renders at its
   native 900px and the frame above scrolls horizontally on narrow screens. */
.go-chart-scroll canvas { display: block; width: 900px; max-width: none; }
.go-export-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.go-export-row button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.go-export-row button:hover { background: var(--muted); }

/* GO results table */
.go-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
}
.go-results-table th {
  text-align: left;
  padding: 6px 10px;
  background: var(--muted);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  white-space: nowrap;
}
.go-results-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.go-results-table tr:last-child td { border-bottom: none; }
.go-results-table tr:hover td { background: var(--accent); }
.go-genes {
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted-foreground);
  max-width: 300px;
  word-break: break-word;
}
.go-branch-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}