/* Modal save dialog: looser spacing on inputs in the left column. */
.save-modal-col .form-group { margin-bottom: 1.25rem; }

/* Summarize-row selects: size each control to its current selection
   (with caret room) and let the input-container shrink so label and
   select sit on the same line. */
.fit-select .shiny-input-container { width: max-content !important; }
.fit-select .selectize-control { width: max-content; min-width: 6em; }
.fit-select .selectize-input { padding-right: 2rem; }

/* Group-values multi-select: constrain to sidebar width (the parent
   .fit-select rules set max-content which blows out for long pills). */
.fit-select .shiny-input-container:has(#group_values) {
  width: 100% !important;
}
.fit-select #group_values + .selectize-control {
  width: 100% !important;
  min-width: 0;
}
.fit-select #group_values + .selectize-control .selectize-input {
  max-width: 100%;
  flex-wrap: wrap;
}

/* Let dropdowns grow wider than the input so options are fully legible. */
.selectize-dropdown { width: auto !important; min-width: 100% !important; }
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header { white-space: nowrap; }

/* Spinner overlays driven by Shiny's global html.shiny-busy class. One per
   tab content area; only the visible tab's overlay actually paints. The
   Explore overlay also uses a data-ready handshake (set in scroller_opts
   initComplete) so it covers the table before DT first renders. */
#tbl-overlay[data-ready='1'],
#summary-overlay,
#plot-overlay { display: none !important; }
html.shiny-busy #tbl-overlay[data-ready='1'],
html.shiny-busy #summary-overlay,
html.shiny-busy #plot-overlay { display: flex !important; }
/* Preview renders inside the save-plot modal make Shiny "busy" but the
   main plotly isn't re-rendering — suppress the spinner when a modal is open. */
html.shiny-busy body.modal-open #plot-overlay { display: none !important; }


/* Bottom-align sort arrows when header text wraps to multiple lines.
   DT places ▲/▼ as absolutely-positioned ::before/::after centred in the
   th.  Override to pin them beside the last line of text instead of
   floating mid-cell.  Values use ex (x-height) so they track the font.
   Cap header text to 2 lines so tall labels don't eat 15 % of viewport.
   The Explore tab wraps text in a .th-label <span>; the Summarize tab puts
   text directly in <th>.  Both are covered by the rules below. */
.dt-clamped-header .dataTables_scrollHead th {
  vertical-align: bottom;
  line-height: 1.3;
}
.dt-clamped-header .dataTables_scrollHead th.sorting::before,
.dt-clamped-header .dataTables_scrollHead th.sorting_asc::before,
.dt-clamped-header .dataTables_scrollHead th.sorting_desc::before {
  top: auto !important;
  bottom: calc(0.75em + 1ex + 3px);
}
.dt-clamped-header .dataTables_scrollHead th.sorting::after,
.dt-clamped-header .dataTables_scrollHead th.sorting_asc::after,
.dt-clamped-header .dataTables_scrollHead th.sorting_desc::after {
  top: auto !important;
  bottom: calc(0.75em + 3px);
}
/* Clamp header text to 2 lines. Both tabs wrap text in a .th-label span:
   Explore via its custom header_container, Summarize via headerCallback. */
.dt-clamped-header .dataTables_scrollHead th .th-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Codebook tooltips on DT column headers can carry a sentence or two;
   default Bootstrap width (~200px) is cramped. */
.tooltip-inner { max-width: 360px; text-align: left; }

/* Navbar layout: brand pinned left, tabs centered, right-side controls absolute.
   Moved from app.R tags$style block. */
.navbar { position: relative; overflow: visible; }
.navbar > .container-fluid { position: static; overflow: visible; }
.navbar-collapse { overflow: visible; }
.navbar .navbar-brand { position: absolute; left: 1.5rem; top: 0; bottom: 0; display: flex; align-items: center; margin: 0; }
.navbar .navbar-nav { width: 100%; justify-content: center; }
.navbar .navbar-nav > .nav-item:last-child { position: absolute; right: 1rem; top: 0; bottom: 0; display: flex; align-items: center; }
.navbar .form-group { margin-bottom: 0; }

/* Navbar download controls: select + button share sm sizing. */
.navbar .btn.btn-sm,
.navbar select.form-control {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  height: auto;
}
.navbar select.form-control {
  padding-right: 2rem; /* room for caret */
}
/* Prevent icon baseline/descender space from inflating button height */
.navbar .btn.btn-sm i { vertical-align: middle; }

/* Never collapse tabs behind a hamburger — Explore / Summarize / Visualize
   stay visible at every width.  Download controls hide on narrow screens.
   bslib uses BS3-compat markup: the toggle is .navbar-toggle (not
   .navbar-toggler) and the wrapper is .navbar-header. */
.navbar-toggle { display: none !important; }
.navbar-collapse { display: flex !important; flex-basis: auto; }

/* Narrow screens: brand left, tabs right-aligned on same row */
@media (max-width: 1249.98px) {
  .navbar > .container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .navbar .navbar-header {
    flex: 0 0 auto;
    width: auto;
  }
  .navbar .navbar-brand { position: static; }
  /* Hide Tour button so brand + tabs fit on one line */
  .navbar .navbar-brand #tour { display: none; }
  .navbar .navbar-collapse {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .navbar .navbar-nav {
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-left: 1rem;
  }
  .navbar .navbar-nav > .nav-item:last-child {
    position: static;
    display: none !important;
  }
}

/* Narrower: hide the "Data explorer" subtitle to keep single line */
@media (max-width: 767.98px) {
  .navbar .navbar-brand .opacity-75 { display: none; }
}

/* Phone: let brand truncate so tabs always fit */
@media (max-width: 575.98px) {
  .navbar .navbar-header {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .navbar .navbar-brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .navbar .navbar-nav { gap: 0.125rem; margin-left: 0.5rem; }
  .navbar .navbar-nav .nav-link { padding-left: 0.35rem; padding-right: 0.35rem; }
}

/* Highlight the active Explore / Summarize / Visualize tab */
.navbar .navbar-nav .nav-link { opacity: 0.65; }
.navbar .navbar-nav .nav-link.active { opacity: 1; }

/* Dataset-switcher dropdown. Body font on the menu so its descendants don't
   inherit Playfair Display from the .navbar-brand ancestor; bold section
   headers. Everything else (padding, dividers, hover, active) is Bootstrap. */
.slicer-menu { font-family: var(--bs-body-font-family); }
.slicer-menu .dropdown-header { font-weight: 700; }

/* Plot save modal preview pane: a centered box matching bslib card chrome. */
.preview-pane {
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem;
  background: var(--bs-white);
}

/* rintrojs: fix Safari rendering bug where highlight layer is invisible. */
.introjs-tooltipReferenceLayer {
  visibility: visible !important;
}

/* Column-picker: match sidebar font size (bslib sidebar is smaller
   than Bootstrap's default 1rem button/dropdown text). */
.sidebar .bootstrap-select .btn,
.sidebar .bootstrap-select .dropdown-menu { font-size: inherit; }

/* Force the column-picker dropdown to always open downward. handlers.js sets
   data-bs-display="static" on the toggle to bypass Popper entirely. These
   CSS rules are a safety net in case Popper still runs (e.g. race condition
   on init): neutralize the dropup class and top-* placement overrides. */
.bootstrap-select.dropup .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}