/* Sunburst chart card — structural styles separate from display toggle */
#ud-chart-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  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;
}


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

#ud-help-popover {
  top: 15px;
  right: 15px;
  left: auto;
  width: 360px;
  max-height: 38vw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}

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

/* ------------------------------------------------------------------ */
/* Upload page navbar — mirrors #nav-bar from stylesheet.py           */
/* ------------------------------------------------------------------ */

#ud-nav-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0;
  background-color: #141726;
  border: 1px solid rgba(255,255,255,0.15);
}

#ud-nav-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#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: 12px; height: 12px; display: block; }

/* Controls collapse strip */
#ud-btn-collapse:hover {
  background-color: var(--hover-bg) !important;
  color: var(--scuba-text) !important;
}

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