/*
 * Theme overrides and status-page components on top of Bulma 1.0.
 * Loaded after bulma.min.css. Bulma's own custom properties handle
 * light/dark, so every rule below is written in terms of them.
 */

:root {
  --bulma-family-primary: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bulma-radius: 6px;
  --bulma-radius-small: 4px;
  --bulma-radius-large: 8px;

  /* Timeline / status colours, derived from Bulma's palette. */
  --status-ok: var(--bulma-success);
  --status-warning: var(--bulma-warning);
  --status-critical: var(--bulma-danger);
  --status-maintenance: var(--bulma-info);
  --status-unknown: var(--bulma-grey-light);
}

/* ---------------------------------------------------------------------------
 * Theme-aware colour variants
 *
 * Bulma 1.0 ships the `soft`/`bold` custom properties for every colour (they
 * swap lightness between the light and dark schemes) but only exposes an
 * `is-soft` modifier on buttons. The older `is-light` modifier does NOT swap in
 * dark mode, so a `tag is-success is-light` stays pale-green-on-dark. Extend
 * `is-soft` to tags and notifications, and add text helpers backed by the
 * `-on-scheme` properties (Bulma's `has-text-warning-dark` is a fixed dark tone
 * that vanishes on a dark background).
 * ------------------------------------------------------------------------ */

.tag.is-success.is-soft,
.notification.is-success.is-soft {
  background-color: var(--bulma-success-soft);
  color: var(--bulma-success-soft-invert);
}

.tag.is-warning.is-soft,
.notification.is-warning.is-soft {
  background-color: var(--bulma-warning-soft);
  color: var(--bulma-warning-soft-invert);
}

.tag.is-danger.is-soft,
.notification.is-danger.is-soft {
  background-color: var(--bulma-danger-soft);
  color: var(--bulma-danger-soft-invert);
}

.tag.is-info.is-soft,
.notification.is-info.is-soft {
  background-color: var(--bulma-info-soft);
  color: var(--bulma-info-soft-invert);
}

.tag.is-link.is-soft,
.notification.is-link.is-soft {
  background-color: var(--bulma-link-soft);
  color: var(--bulma-link-soft-invert);
}

/* `.panel-heading` keeps a light background in the dark scheme while its text
 * follows the scheme, which leaves near-white on light grey. Re-derive both
 * from theme-aware properties. */
.panel-heading {
  background-color: var(--bulma-background);
  color: var(--bulma-text-strong);
}

.has-text-success-scheme {
  color: var(--bulma-success-on-scheme) !important;
}

.has-text-warning-scheme {
  color: var(--bulma-warning-on-scheme) !important;
}

.has-text-danger-scheme {
  color: var(--bulma-danger-on-scheme) !important;
}

.has-text-info-scheme {
  color: var(--bulma-info-on-scheme) !important;
}

.has-text-link-scheme {
  color: var(--bulma-link-on-scheme) !important;
}

/* Bulma sizes .icon itself but not the inline SVG it wraps. */
.icon > svg {
  width: 100%;
  height: 100%;
}

/* Bulma's default container widens on large screens; cap the status page so
 * lines stay readable (matches the previous 1024px layout). */
.container.is-max-page {
  max-width: 1024px;
}

/* Sticky footer: header / main / footer stacked over the full viewport. */
html {
  min-height: 100%;
}

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

/* ---------------------------------------------------------------------------
 * Status timeline (30-day history bars)
 * The per-day class is `timeline-<status>`, rendered straight from the
 * service_status enum, so the names must stay in sync with the DB values.
 * ------------------------------------------------------------------------ */

.status-timeline {
  display: flex;
  gap: 1px;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--bulma-radius-small);
}

.status-timeline.is-large {
  height: 2rem;
}

.status-timeline > div {
  flex: 1 1 0;
  min-width: 0;
}

.timeline-ok {
  background-color: var(--status-ok);
}

.timeline-warning {
  background-color: var(--status-warning);
}

.timeline-critical {
  background-color: var(--status-critical);
}

.timeline-maintenance {
  background-color: var(--status-maintenance);
}

.timeline-unknown {
  background-color: var(--status-unknown);
}

/* Legend swatches next to the timeline. */
.legend-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  border-radius: var(--bulma-radius-small);
  vertical-align: middle;
}

/* Small round status dot used in lists. */
.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background-color: var(--status-unknown);
}

.status-dot.is-ok {
  background-color: var(--status-ok);
}

.status-dot.is-warning {
  background-color: var(--status-warning);
}

.status-dot.is-critical {
  background-color: var(--status-critical);
}

.status-dot.is-maintenance {
  background-color: var(--status-maintenance);
}

.status-dot.is-pulsing {
  animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.is-pulsing {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Left accent border for incident / maintenance cards
 * ------------------------------------------------------------------------ */

.has-accent {
  border-left: 4px solid var(--bulma-border);
}

.has-accent.is-danger {
  border-left-color: var(--bulma-danger);
}

.has-accent.is-warning {
  border-left-color: var(--bulma-warning);
}

.has-accent.is-info {
  border-left-color: var(--bulma-info);
}

.has-accent.is-success {
  border-left-color: var(--bulma-success);
}

/* ---------------------------------------------------------------------------
 * Incident update feed (vertical timeline)
 * ------------------------------------------------------------------------ */

.update-feed {
  position: relative;
  list-style: none;
  margin: 0;
  padding-left: 2rem;
}

.update-feed::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.5625rem; /* aligns with the centre of the dots below */
  width: 2px;
  background-color: var(--bulma-border);
}

.update-feed > li {
  position: relative;
}

.update-feed > li:not(:last-child) {
  margin-bottom: 1.5rem;
}

.update-feed > li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: -1.75rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--bulma-info);
  border: 2px solid var(--bulma-scheme-main);
}

.update-feed > li.is-resolved::before {
  background-color: var(--bulma-success);
}

.update-feed > li.is-identified::before {
  background-color: var(--bulma-warning);
}

.update-feed > li.is-investigating::before {
  background-color: var(--bulma-danger);
}

/* ---------------------------------------------------------------------------
 * Misc
 * ------------------------------------------------------------------------ */

/* Scrollable checkbox list on the subscribe form. */
.scroll-box {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--bulma-border);
  border-radius: var(--bulma-radius);
  padding: 0.75rem;
}

/* Bulma leaves no gap between a checkbox and its label text. */
.checkbox input[type="checkbox"] {
  margin-right: 0.5rem;
}

.scroll-box .checkbox {
  display: block;
  padding: 0.1875rem 0;
}

/* Markdown output inside compact cards should not add a trailing margin. */
.content:last-child > :last-child {
  margin-bottom: 0;
}

/* Operator-authored markdown (incident/maintenance descriptions) is rendered in
 * `.content.is-small`; keep its headings from outgrowing the card title. */
.content.is-small h1,
.content.is-small h2,
.content.is-small h3,
.content.is-small h4 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

/* Long application names must not blow up the row layout. */
.is-truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}