body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

pre.task-logs {
  max-height: 25rem;
  line-height: 1;
}

/*
 * Cluster element selection: the checkbox itself is hidden, its state drives the
 * styling of both its button label and the surrounding card.
 */
.cluster-element-select input[type="checkbox"] {
  display: none;
}

/* Same custom properties Bulma sets for .button.is-success, so it follows the theme */
.cluster-element-select:has(input[type="checkbox"]:checked) {
  background-color: var(--bulma-success) !important;
  color: var(--bulma-dark);
}

.card:has(.cluster-element-select input[type="checkbox"]:checked) {
  outline: 4px solid var(--bulma-success);
}

label.card {
  display: block;
}

.card-image figure {
  border-start-start-radius: var(--bulma-radius);
  border-start-end-radius: var(--bulma-radius);
  overflow: hidden;
}
#selection-count-tag.is-success:hover {
  background-color: var(--bulma-danger) !important;
}

.auto-scroll-to-bottom {
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
}

#theme-switch {
  cursor: pointer;
}

/*
 * Elements only displayed with one of the themes (navbar logo, theme switch icons).
 * Done in CSS rather than JS so the right element is displayed on the first paint,
 * following the same rules as Bulma: an explicit data-theme, else prefers-color-scheme.
 */
:root[data-theme="light"] .is-dark-theme-only,
:root[data-theme="dark"] .is-light-theme-only {
  display: none !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .is-dark-theme-only {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .is-light-theme-only {
    display: none !important;
  }
}

/* Modal triggers are plain anchors without an href, they still need to look clickable */
a[hx-get]:not([href]) {
  cursor: pointer;
}

/* All clusters on the management page are displayed with a Y-axis overflow so that users
   can list them and view their elements no matter their position in the list */
#cluster_runs {
  height: 80vh;
  overflow-y: scroll;
  padding-right: 0.4rem;
}