/* Custom styles on top of bslib.
 *
 * Deliberately small. bslib supplies the grid, the controls, focus states and
 * the dark mode; this file only styles the few things it has no opinion about.
 * Colours come from Bootstrap variables so dark mode works without a second
 * palette here. */

/* Card headers ------------------------------------------------------------
 *
 * bslib's own dashboard styling resets every card() back to a transparent
 * header (the .bslib-card class), which is why _brand.yml's card-cap-bg
 * has no visible effect. Overriding the same variable here, after bslib's
 * stylesheet, is what actually reaches the page. The primary-tinted subtle
 * background is a live Bootstrap token, so it follows dark mode on its own.
 */

.bslib-card {
  --bs-card-cap-bg: var(--bs-primary-bg-subtle);
}

/* Browse view ------------------------------------------------------------ */

.browse-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}

.search-row .form-group {
  margin-bottom: 0;
}

.catalog-meta {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* Selected study pane ---------------------------------------------------- */

.study-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0 0.75rem;
}

/* Abstracts run to 10,000 characters, so the pane scrolls rather than pushing
 * the load button out of reach. */
.abstract-box {
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

.study-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Navbar study chip ------------------------------------------------------ */

.study-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.study-chip-empty {
  color: var(--bs-secondary-color);
  border-style: dashed;
}

/* The navbar is pinned to a dark coffee background regardless of the page's
 * own light or dark mode. A plain span does not pick that up on its own, so
 * it needs the navbar's own text colour rather than the page's body colour. */
.navbar .study-chip {
  color: var(--bs-navbar-active-color);
  border-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
}

.navbar .study-chip-empty {
  color: var(--bs-navbar-color);
}

/* Export ----------------------------------------------------------------- */

.download-row + .download-row {
  margin-top: 0.9rem;
}

.download-list .btn {
  text-align: left;
}

/* Load progress ---------------------------------------------------------- */

.load-progress {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

.load-progress .progress {
  height: 0.4rem;
}

/* Footer -------------------------------------------------------------------
 *
 * page_navbar's own footer slot sits inside the same flex layout bslib uses
 * to give the Browse tab a fillable, full-height table. That layout locks
 * the whole page to exactly one viewport height, so the footer's position
 * depended on which tab was open: below the fold on a plot-heavy tab, or
 * floating mid-page on a short one, because it was never a real fixture of
 * the page, just whatever was left over after that tab's content.
 *
 * Fixed positioning takes it out of that layout entirely, so it renders in
 * the same place on every tab. The padding-bottom and the tab-content
 * scrollbar below give a tall tab (Overview, Quality) somewhere to put the
 * content the fixed footer would otherwise sit on top of.
 */

.app-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.app-footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

/* bslib pins the page to exactly one viewport height (padding: 0px inline)
 * so the Browse tab can size its table against it. !important overrides
 * that inline style deliberately: every tab still needs room at the bottom
 * for the now-fixed footer, not just Browse. */
body.bslib-page-navbar {
  padding-bottom: 3.5rem !important;
}

/* A tab taller than the space that leaves scrolls on its own, rather than
 * running past the page's fixed height and disappearing under the footer
 * with no way to reach it. */
.tab-content {
  overflow-y: auto;
  min-height: 0;
}

/* Study header on the overview ------------------------------------------- */

.study-header {
  padding: 1rem 1.15rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}

.study-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.study-header-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  max-width: 70ch;
}

.study-header-meta {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.study-header-links {
  display: flex;
  gap: 0.4rem;
}

/* Numbers with units and captions, rather than four coloured tiles. */
.stat-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bs-border-color);
}

.stat-figure-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-figure-unit {
  font-size: 0.85rem;
  font-weight: 500;
}

.stat-figure-caption {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

/* Next step after a load ------------------------------------------------- */

.loaded-next {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--bs-success-border-subtle);
  border-radius: var(--bs-border-radius);
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

/* Guided tour -------------------------------------------------------------
 *
 * driver.js ships its own white popover regardless of the page's theme.
 * These overrides route it through the same Bootstrap variables bslib
 * already themes, so the tour looks like part of the app rather than a
 * plugin dropped on top of it, and follows dark mode without a second copy
 * of these rules.
 */

.driver-popover {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.driver-popover-title {
  color: var(--bs-emphasis-color);
}

.driver-popover-description {
  color: var(--bs-body-color);
}

.driver-popover-progress-text {
  color: var(--bs-secondary-color);
}

.driver-popover-close-btn {
  color: var(--bs-secondary-color);
}

.driver-popover-navigation-btns button {
  background: var(--bs-primary);
  color: var(--bs-white, #fff);
  border: none;
  border-radius: var(--bs-border-radius);
  text-shadow: none;
}

.driver-popover-navigation-btns button.driver-popover-btn-disabled {
  opacity: 0.5;
}

.driver-popover-arrow {
  border-color: transparent;
}

/* The five arrow sides each carry the matching border colour, since
 * driver.js draws the arrow as a CSS border triangle rather than a shape. */
.driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: var(--bs-body-bg);
}
.driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: var(--bs-body-bg);
}
.driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: var(--bs-body-bg);
}
.driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: var(--bs-body-bg);
}