/* 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-log {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb, #555) transparent;
}

#ud-left-col .collapse.show::-webkit-scrollbar,
#ud-contrasts-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-log::-webkit-scrollbar-track        { background: transparent; }

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

/* 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;
}

/* Fixed tooltip driven by ud_tooltip.js — escapes overflow clipping */
#ud-tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(74, 70, 90, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #c8ccd6;
  font-size: 11px;
  font-weight: 400;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 99999;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ */
/* 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;
}

/* Zero out marginBottom on all cards; gap provides spacing */
#ud-left-col .ud-left-card {
  margin-bottom: 0 !important;
}

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

/* File card (direct child): grows when its collapse is open */
#ud-left-col > .ud-left-card:has(> .collapse.show) {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Section wrappers (contrast / progress): grow when containing an open collapse */
#ud-contrast-section:has(.collapse.show),
#ud-progress-section:has(.collapse.show) {
  flex: 1 1 0;
  min-height: 0;
}

/* Inner cards inside grown wrappers fill the wrapper */
#ud-contrast-section:has(.collapse.show) > .ud-left-card,
#ud-progress-section:has(.collapse.show) > .ud-left-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Open collapse fills remaining card height */
.ud-left-card:has(> .collapse.show) > .collapse.show {
  flex: 1 1 0;
  min-height: 0;
}

/* Log collapse: content scrolls directly inside it */
#ud-log-collapse.show { overflow-y: auto; }

/* Contrast collapse: becomes a flex column so inner scroll area can grow */
#ud-contrast-collapse.show {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Contrast body div fills the collapse and is itself a flex column */
#ud-contrast-collapse.show > div {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cancel button must not stretch to fill the flex column */
#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;
}


/* Hidden on creation; ud_tooltip.js reveals after 200ms delay. */
#ud-pie-chart { opacity: 0; transition: opacity 0.15s ease; }

/* ------------------------------------------------------------------ */
/* 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: 28px;
  height: 28px;
  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;
}