/* Page-wide type. Family and weight both come from the app's scheme now
   (stylesheet.py): one stack for every surface, and 400 as the body weight.
   Elements with their own explicit fontWeight still override this as normal.

   This rule used to set 'Lato' at 300. Both were problems. Lato was never
   loaded — no @font-face, no font link — so it resolved to whatever the viewer
   had, in practice Arial, while the chrome around this page rendered in the
   system UI face. And 300 is the wrong weight for 11-13px light-on-dark text:
   the bright background bleeds into thin strokes rather than the other way
   round. The declaration stays, rather than being deleted in favour of plain
   inheritance, because it is what keeps this page from drifting again. */
#upload-page {
  font-family: var(--scuba-font);
  font-weight: 400;
}

/* Sunburst chart card — structural styles separate from display toggle */
#ud-chart-card {
  background: #141726;
  border: 0.5px solid #373A46;
  border-radius: 10px;
  margin-bottom: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Scrollable containers — thin dark scrollbar matching SCUBA style */
#ud-contrasts-scroll { overflow-y: auto; flex: 1 1 0; min-height: 0; }

#ud-left-col .collapse.show,
#ud-contrasts-scroll,
#ud-filters-scroll,
#ud-log {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb, #555) transparent;
}

#ud-left-col .collapse.show::-webkit-scrollbar,
#ud-contrasts-scroll::-webkit-scrollbar,
#ud-filters-scroll::-webkit-scrollbar,
#ud-log::-webkit-scrollbar              { width: 4px; height: 4px; }

#ud-left-col .collapse.show::-webkit-scrollbar-track,
#ud-contrasts-scroll::-webkit-scrollbar-track,
#ud-filters-scroll::-webkit-scrollbar-track,
#ud-log::-webkit-scrollbar-track        { background: transparent; }

#ud-left-col .collapse.show::-webkit-scrollbar-thumb,
#ud-contrasts-scroll::-webkit-scrollbar-thumb,
#ud-filters-scroll::-webkit-scrollbar-thumb,
#ud-log::-webkit-scrollbar-thumb        { background: var(--sb-thumb, #555); border-radius: 2px; }

/* Split-by chip: align its content flush with Filters/Contrasts, which
   both sit at their card's own 10px left padding with no extra inset.
   .title-chip-dd .btn (z_overrides.css) sets `padding: 3px 10px !important`
   for the shared title-bar chip look, which also beats an inline
   toggle_style override on dbc.DropdownMenu — an ID-qualified selector is
   needed for higher specificity to zero just the horizontal padding here.
   Height is also pinned to 30px (overriding the shared chip's 34px) to
   exactly match #ud-btn-analyze below, since they now share a row. */
#ud-splitby-dropdown.title-chip-dd .btn {
  padding: 3px 0 !important;
  height: 30px !important;
}

/* Analyze sits beside the Split-by chip — explicit height matching it
   exactly (Analyze's own height is otherwise just padding/line-height
   driven via the shared .ud-flat-btn class, not guaranteed to match).
   Cancel is its permanent neighbour and takes both dimensions from the same
   rule: left to .ud-flat-btn alone each button is only as wide as its own
   label, so the pair came out mismatched purely because "Analyze" has one
   more character than "Cancel". The width is set wide enough for the longer
   of the two labels, with nowrap so a label can never break onto a second
   line inside the fixed box. */
#ud-btn-analyze,
#ud-btn-cancel {
  height: 30px !important;
  width: 72px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Tight wrapping for a Filters row's checkboxes — a row with many levels
   (inline=True dbc.Checklist) wraps onto extra lines, and Bootstrap's
   default .form-check-inline per-item margin-bottom reads as a loose gap
   between those wrapped lines rather than one tight block of checkboxes. */
#ud-filters-container .form-check {
  margin-bottom: 0 !important;
}

/* Unchecked contrast checkboxes — same solid blue as checked state */
#ud-contrasts-scroll .form-check-input:not(:checked) {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Checked rows — no extra row background */
#ud-contrasts-scroll .form-check-input:checked ~ .form-check-label {
  background-color: transparent;
}

/* Cell-type include/exclude checkboxes (_ct_row_div) — Bootstrap's default
   .form-check wrapper is a block with padding-left (space for a label,
   unused here) and .form-check-input has its own margin-top: 0.3em (meant
   to line it up with an adjacent label's text, not to sit centered in a
   flex row on its own) — both fight the row's alignItems:center centering.
   input_style={"marginTop": 0} on the Python side alone wasn't enough
   (only reaches the <input>, not the .form-check wrapper around it), so
   this overrides both directly. Scoped to #ud-log since that's the only
   place these checkboxes render (nothing else there uses .form-check). */
#ud-log .form-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
#ud-log .form-check-input {
  margin: 0 !important;
  float: none !important;
}

/* Fixed tooltip driven by ud_tooltip.js — escapes overflow clipping.
   Everything this surface LOOKS like now comes from the shared tooltip token
   in z_overrides.css, which it was a drifting duplicate of; only the two
   properties that are genuinely its own are left here. */
#ud-tooltip {
  white-space: nowrap;
  z-index: 99999;
}

/* ------------------------------------------------------------------ */
/* Left column accordion — sticky full-height, open card grows        */
/* ------------------------------------------------------------------ */

#ud-left-col {
  position: sticky;
  top: calc(3.4vw + 25px);
  height: calc(100vh - 3.4vw - 45px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* All direct children: don't shrink past their header height */
#ud-left-col > * {
  flex-shrink: 0;
}

/* Cancel button must not stretch to fill the flex column. Its size comes from
   the shared #ud-btn-analyze rule above; this is the one thing about it that
   is not shared with Analyze. */
#ud-btn-cancel {
  align-self: flex-start;
}

/* Done section: don't grow; when display:none it leaves flex layout entirely */
#ud-done-section {
  flex: 0 0 auto;
}


/* No opacity gate here any more. The chart used to be created invisible and
   revealed on a timer, to cover the window in which it had been drawn against a
   zero-size box. Its card is now laid out at all times and hidden with
   visibility instead (CHART_CARD_HIDDEN in user_data/layout_upload.py), so the
   first draw is already correctly sized and there is no mis-draw to hide. */

/* ── Sunburst: make the slices reachable by the pointer ──────────────────────
   The finger cursor has been lost and restored more than once here. The cursor
   was never the problem — reaching the slices at all was.

   Plotly's own injected stylesheet sets

       .js-plotly-plot .plotly .main-svg      { pointer-events: none; }
       .js-plotly-plot .plotly .main-svg .draglayer { pointer-events: all; }

   i.e. every SVG layer is inert and exactly one child is re-enabled. That is
   right for cartesian traces, where a single drag layer handles all
   interaction. Sunburst has no draglayer: plotly.js re-enables pointer events
   on the slice nodes from JavaScript instead, per trace. Whenever that did not
   happen — a different bundle, a differently shaped figure — the whole chart
   stayed inert, document.elementFromPoint over a slice returned the container
   div rather than any SVG node, and the container's arrow cursor showed through
   over slices and gaps alike. Hover tooltips die with it, for the same reason.

   So we re-enable it ourselves rather than depending on trace internals. The
   id gives this higher specificity than Plotly's .main-svg rule, so no
   !important is needed for pointer-events; the cursor does need it, because
   Plotly writes cursor inline on these nodes and inline outranks any rule. */
#ud-pie-chart .main-svg .sunburstlayer,
#ud-pie-chart .main-svg .sunburstlayer * {
  pointer-events: all;
}

#ud-pie-chart .main-svg .sunburstlayer .slice,
#ud-pie-chart .main-svg .sunburstlayer .slice * {
  cursor: pointer !important;
}

/* ------------------------------------------------------------------ */
/* Help popover — positioning only; skin comes from .popover in       */
/* assets/style.css (written by SCUBA.py from stylesheet.py)          */
/* ------------------------------------------------------------------ */

#ud-help-popover {
  padding: 0;
}

#ud-help-popover .panel-drag-header ~ div::-webkit-scrollbar         { width: 4px; height: 4px; }
#ud-help-popover .panel-drag-header ~ div::-webkit-scrollbar-track   { background: transparent; }
#ud-help-popover .panel-drag-header ~ div::-webkit-scrollbar-thumb   { background: var(--sb-thumb); border-radius: 2px; }

/* ------------------------------------------------------------------ */
/* Upload page top bar + navbar — mirrors #top-bar / #nav-bar         */
/* ------------------------------------------------------------------ */

#ud-header-bar {
  background: #0a0c1b;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  gap: 2px;
  padding: 0 6px;
}

#ud-nav-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.10);
  padding-right: 4px;
  margin-right: 2px;
}

#ud-nav-bar .btn {
  width: 21px;
  height: 21px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0;
  cursor: pointer;
}

#ud-nav-bar .btn:disabled {
  opacity: 0.25 !important;
  pointer-events: none;
}

#ud-nav-bar .btn:hover {
  background-color: var(--hover-bg) !important;
}

#ud-nav-bar img { width: 13px; height: 13px; display: block; }


/* Dark native select for split-by */
#ud-splitby-select,
#ud-splitby-select option {
  background-color: #141726 !important;
  color: #ddd !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

#ud-splitby-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100,160,255,0.3) !important;
}