/* Full page with footer */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* Let the form breathe a bit */
form div.field {
  margin-bottom: 1rem;
}

/* Configure IIIF viewer to take 40% of vertical space available */
#iiif_viewer {
  width: 100%;
  height: 40vh;
  position: sticky;
  top: 0;
  z-index: 2;
}

/*
 * Make these columns as narrow as possible to save some width
 * https://stackoverflow.com/a/33649020/5990435
 */
th.is-narrow, td.is-narrow {
  white-space: nowrap;
  width: 1%;
}

.state-button input[type="radio"] {
  display: none;
}
/*
 * Apply the same style as .button.is-success for `validated` radio buttons,
 * and .button.is-danger for `rejected` radio buttons
 */
.state-button:has(input[type="radio"]:checked) {
  --bulma-button-border-width: 0px;
  --bulma-button-outer-shadow-a: 0;
}
.state-button:has(input[type="radio"]:checked):focus-visible {
  --bulma-button-border-width: 1px;
}
.state-button:has(input[type="radio"][value="rejected"]:checked) {
  --bulma-button-h: var(--bulma-danger-h);
  --bulma-button-s: var(--bulma-danger-s);
  --bulma-button-l: var(--bulma-danger-l);
  --bulma-button-background-l: var(--bulma-danger-l);
  --bulma-button-border-l: var(--bulma-danger-l);
  --bulma-button-color-l: var(--bulma-danger-invert-l);
}
.state-button:has(input[type="radio"][value="validated"]:checked) {
  --bulma-button-h: var(--bulma-success-h);
  --bulma-button-s: var(--bulma-success-s);
  --bulma-button-l: var(--bulma-success-l);
  --bulma-button-background-l: var(--bulma-success-l);
  --bulma-button-border-l: var(--bulma-success-l);
  --bulma-button-color-l: var(--bulma-success-invert-l);
}
.state-button:has(input[type="radio"][value="missing"]:checked) {
  --bulma-button-h: var(--bulma-warning-h);
  --bulma-button-s: var(--bulma-warning-s);
  --bulma-button-l: var(--bulma-warning-l);
  --bulma-button-background-l: var(--bulma-warning-l);
  --bulma-button-border-l: var(--bulma-warning-l);
  --bulma-button-color-l: var(--bulma-warning-invert-l);
}

/* Display annotation search results in a box with overflow */
#annotation .results {
  max-height: 20vh;
  overflow: scroll;
}

.logs-box {
  max-height: 50vh;
  overflow: scroll;
}

.white-space-pre {
  white-space: pre;
}