/* Token mirror of docs/spec/design.md. Single source of CSS-level styling. */

:root {
  --ub-brand-olive: #7B8438;
  --ub-brand-olive-dark: #5E6629;
  --ub-brand-olive-soft: #EFF1DC;

  --ub-neutral-bg: #FBFAF6;
  --ub-neutral-surface: #FFFFFF;
  --ub-neutral-border: #E8E6DD;
  --ub-neutral-divider: #F0EEE6;

  --ub-text-primary: #1F2128;
  --ub-text-secondary: #4A4F58;
  --ub-text-muted: #6E7480;
  --ub-text-inverse: #FFFFFF;

  --ub-state-positive: #2E8B57;
  --ub-state-negative: #C0392B;
  --ub-state-warning: #B7791F;

  --ub-shadow-xs: 0 1px 2px rgba(31, 33, 40, 0.04);
  --ub-shadow-sm: 0 2px 8px rgba(31, 33, 40, 0.06);

  --ub-radius-sm: 4px;
  --ub-radius-md: 8px;

  --ub-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ub-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

html,
body {
  margin: 0;
  padding: 0;
  scrollbar-gutter: stable;
  background: var(--ub-neutral-bg);
  color: var(--ub-text-primary);
  font-family: var(--ub-font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Layout shell ------------------------------------------------------------- */

.ub-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ub-neutral-bg);
  border-bottom: 1px solid var(--ub-neutral-border);
}

.ub-header-inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ub-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ub-text-primary);
  font-weight: 700;
  font-size: 16px;
}

.ub-brand-flask {
  width: 20px;
  height: 20px;
  display: inline-block;
  color: currentColor;
}

.ub-nav-link {
  color: var(--ub-text-secondary);
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--ub-radius-sm);
}

.ub-nav-link:hover {
  color: var(--ub-text-primary);
  background: var(--ub-neutral-divider);
}

.ub-nav-link[data-active="true"] {
  color: var(--ub-text-primary);
}

.ub-page {
  padding-top: 24px;
  padding-bottom: 64px;
}

/* BenchmarkCard ------------------------------------------------------------ */

.ub-task-card {
  background: var(--ub-neutral-surface);
  border: 1px solid var(--ub-neutral-border);
  border-radius: var(--ub-radius-md);
  box-shadow: var(--ub-shadow-xs);
  padding: 16px;
  min-height: 140px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}

.ub-task-card:hover {
  box-shadow: var(--ub-shadow-sm);
  border-color: #DAD7C9;
}

.ub-task-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ub-task-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ub-text-primary);
  margin: 0;
  line-height: 1.3;
}

.ub-task-card-desc {
  font-size: 13px;
  color: var(--ub-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ub-task-card-stats {
  margin-top: auto;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--ub-text-secondary);
}

/* Pills ------------------------------------------------------------------- */

.ub-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--ub-neutral-divider);
  color: var(--ub-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* States ------------------------------------------------------------------- */

.ub-state {
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ub-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ub-text-primary);
  margin: 0;
}

.ub-state-title--error {
  color: var(--ub-state-negative);
}

.ub-state-body {
  font-size: 13px;
  color: var(--ub-text-muted);
  margin: 0;
}

.ub-state-actions {
  margin-top: 8px;
}

/* Skeletons --------------------------------------------------------------- */

.ub-skeleton-card {
  background: var(--ub-neutral-surface);
  border: 1px solid var(--ub-neutral-border);
  border-radius: var(--ub-radius-md);
  min-height: 140px;
  padding: 16px;
}

/* L2 leaderboard --------------------------------------------------------- */

.ub-l2-grid {
  --ag-background-color: var(--ub-neutral-surface);
  --ag-foreground-color: var(--ub-text-primary);
  --ag-secondary-foreground-color: var(--ub-text-secondary);
  --ag-header-background-color: var(--ub-neutral-bg);
  --ag-header-foreground-color: var(--ub-text-secondary);
  --ag-border-color: var(--ub-neutral-border);
  --ag-row-border-color: var(--ub-neutral-divider);
  --ag-row-hover-color: var(--ub-neutral-divider);
  --ag-font-family: var(--ub-font-sans);
  --ag-font-size: 13px;
  --ag-cell-horizontal-padding: 12px;
  --ag-grid-size: 5px;
}

/* L3 Runs grid — full-height vertical separators between header cells */
.ub-l3-runs-grid .ag-header-cell::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ub-neutral-border);
  pointer-events: none;
}

.ub-l3-runs-grid .ag-header-cell:last-child::after {
  display: none;
}

/* Resize handle — fade in/out on hover */
.ub-l3-runs-grid .ag-header-cell-resize {
  opacity: 0;
  transition: opacity 200ms ease;
}

.ub-l3-runs-grid .ag-header-cell:hover .ag-header-cell-resize {
  opacity: 1;
}

/* Centre header labels in L3 */
.ub-l3-runs-grid .ag-header-cell-label {
  justify-content: center;
}

.ub-l2-grid .ag-root-wrapper {
  border-radius: var(--ub-radius-md);
  overflow: hidden;
}

.ub-l2-grid .ag-cell {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
}

.ub-l2-grid .ub-rank-1,
.ub-l2-grid .ub-rank-1.ag-row-hover,
.ub-l2-grid .ub-rank-1.ag-row-odd {
  background: var(--ub-brand-olive-soft) !important;
}

.ub-l2-grid .ub-cell-primary {
  font-weight: 700;
  color: var(--ub-text-primary);
}

.ub-l2-grid .ub-th-num .ag-header-cell-label {
  justify-content: flex-end;
}

.ub-l2-grid .ub-cell-method-extends {
  display: block;
  font-size: 11px;
  color: var(--ub-text-muted);
  line-height: 1.2;
  margin-top: 1px;
}

.ub-l2-panel {
  background: var(--ub-neutral-surface);
  border: 1px solid var(--ub-neutral-border);
  border-radius: var(--ub-radius-md);
  padding: 12px 16px 4px 16px;
  margin-bottom: 16px;
}

.ub-l2-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ub-text-primary);
  margin: 0 0 4px 0;
}

/* ChartCard primitives --------------------------------------------------- */

/* Toolbar holding the settings popover trigger + fullscreen icon.
   Mounted into the host card's existing header — no chrome of its own. */
.ub-chart-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

/* Mantine Combobox (dmc Select): portaled list above chart settings Popover (z 2100). */
body .mantine-Combobox-dropdown {
  z-index: 3200 !important;
}

/* Fullscreen takeover. Pinning to the viewport instead of mounting a
   Modal keeps the same dcc.Graph instance — no double subscription, no
   figure copy — so settings continue to apply live. The rule keys off
   the suffix class only, so it works on any host element (dmc.Card,
   plain div, ...) tagged with `ub-chart-card-host`. */
.ub-chart-card--full {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 100vw !important;
  z-index: 1000 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--ub-neutral-surface) !important;
  box-shadow: var(--ub-shadow-sm) !important;
  overflow: auto;
  box-sizing: border-box !important;
}

.ub-chart-card--full .ub-chart-graph,
.ub-chart-card--full .ub-chart-graph .js-plotly-plot,
.ub-chart-card--full .ub-chart-graph .plot-container {
  height: calc(100vh - 96px) !important;
  width: 100% !important;
}

.ub-l2-grid .ag-paging-panel {
  font-size: 12px;
  color: var(--ub-text-secondary);
  border-top: 1px solid var(--ub-neutral-border);
}

.ub-l2-grid .ag-paging-button {
  cursor: pointer;
}

/* L3 method workspace — runs tab table */

/* ub-row-selected: no highlight, normal row appearance */

.ub-l2-grid .ub-row-dimmed .ag-cell {
  color: #C0C4CC !important;
}

/* ── Custom column header — sort arrows only ── */

.ub-col-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 2px;
  overflow: hidden;
}
.ub-col-header__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ub-col-header__sort {
  font-size: 11px;
  opacity: 0.55;
  flex-shrink: 0;
}
.ag-header-cell:hover .ub-col-header__sort {
  opacity: 0.8;
}

/* Column manager items */
.ub-col-item:hover {
  background: var(--ub-neutral-divider, rgba(0,0,0,0.05));
}

/* HTML legend (W&B-style wrapping legend above chart) */

.ub-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0px 8px;
  padding: 0 4px 2px 4px;
  line-height: 1.4;
  word-break: break-all;
  font-size: 9px;
}

.ub-chart-legend > span {
  font-size: 9px !important;
}

/* Panel grid — flex container with resizable children */

.ub-panel-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.ub-panel-grid > .ub-chart-card-host {
  /* Width is set inline by panelResize.js for proper row-fill behaviour
     (uniform across group, last incomplete row stretched). The CSS
     fallback is only used before the JS layout pass runs. */
  width: calc(50% - 8px);
  min-width: 0;
  height: 420px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.ub-panel-grid > .ub-chart-card-host > * {
  min-height: 0;
}

/* dcc.Graph inline style already sets flex: 1 1 auto + height 100% — no
   extra rules needed here, but keep a hard floor so the plot is always
   visually present even with very tall legends. */
.ub-panel-grid > .ub-chart-card-host .ub-chart-graph {
  min-height: 140px;
}

.ub-panel-grid > .ub-chart-card-host .ub-chart-graph .js-plotly-plot,
.ub-panel-grid > .ub-chart-card-host .ub-chart-graph .plot-container {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 768px) {
  .ub-panel-grid > .ub-chart-card-host {
    width: 100%;
  }
}

/* L3 method workspace — sidebar run rows */

.ub-run-row {
  cursor: default;
  transition: background-color 100ms ease;
}

.ub-run-row:hover {
  background-color: var(--ub-neutral-divider);
}

.ub-run-row__id {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ub-run-row__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Horizontal scrollbar spans full width including pinned area.
   The left spacer sits under pinned columns — keep it but hide its
   own scrollbar so only the main track scrolls. */
.ub-l2-grid .ag-horizontal-left-spacer {
  overflow-x: hidden !important;
}