/* surense2 web UI — small overrides on top of Bulma.
   No hardcoded colours: use Bulma's CSS custom-property tokens so light/dark both work
   (Bulma follows prefers-color-scheme and the data-theme override set by theme.js). */

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

main.section {
  flex: 1 0 auto;
}

.footer {
  padding: 1rem 1.5rem;
  background-color: var(--bulma-scheme-main-bis);
  color: var(--bulma-text-weak);
}

/* status tables: let the row detail use the weak text token (adapts to theme) */
.table td.has-text-grey {
  color: var(--bulma-text-weak) !important;
}

/* breathing room: space the checkbox box from its label text */
.checkbox input[type="checkbox"] { margin-inline-end: 0.45rem; }

/* API console: colored JSON (tokens adapt to light/dark) */
.console-json {
  max-height: 32rem;
  overflow: auto;
  background-color: var(--bulma-scheme-main-bis);
  color: var(--bulma-text);
}
.console-json .j-key { color: var(--bulma-link); font-weight: 600; }
.console-json .j-str { color: var(--bulma-success); }
.console-json .j-num { color: var(--bulma-info); }
.console-json .j-bool { color: var(--bulma-primary); }
.console-json .j-null { color: var(--bulma-danger); }

/* Toasts: transient success/error notifications, stacked top-right (see static/toast.js) */
#toast-container {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(90vw, 24rem);
}
#toast-container .notification {
  margin-bottom: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.18s ease-out;
}
#toast-container .notification.toast-leaving {
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}