/* Devora status theme — tokens from repo-root DESIGN.md
 * Served as-is from assets/ → https://status.devora.no/devora-status-theme.css
 * Wired via status-website.themeUrl (Upptime documented custom theme).
 *
 * With themeUrl set, Upptime does not auto-load dual light.css+dark.css.
 * Light tokens live on :root; dark via prefers-color-scheme and [data-theme="dark"].
 */

:root {
  color-scheme: light dark;

  --body-background-color: #F8F7FF;
  --body-text-color: #242A56;
  --card-background-color: #FFFFFF;
  --nav-background-color: #FFFFFF;
  --nav-border-bottom-color: #E8E6F5;
  --nav-current-border-bottom-color: #3432A6;
  --card-border-color: #E8E6F5;
  --down-border-left-color: #EF4444;
  /* Card surface (not soft-error) — Live status + article cards match article.up */
  --down-background-color: #FFFFFF;
  --degraded-border-left-color: #F59E0B;
  --up-border-left-color: #22C55E;
  --tag-color: #FFFFFF;
  --tag-up-background-color: #22C55E;
  --tag-down-background-color: #EF4444;
  --tag-degraded-background-color: #F59E0B;
  --change-background-color: #F59E0B;
  --error-button-border-color: #242A56;
  --error-button-background-color: #3432A6;
  --error-button-color: #FFFFFF;
  --submit-button-border-color: #242A56;
  --submit-button-background-color: #3432A6;
  --submit-button-color: #FFFFFF;

  /* Legend / Digdir-inspired swatches (semantic; preserved in dark) */
  --status-success: #22C55E;
  --status-warning: #F59E0B;
  --status-error: #EF4444;
  --status-info: #3B82F6;
  --legend-muted: #64748B;
  --legend-surface: #FFFFFF;
  --legend-border: #E8E6F5;
  --banner-surface: #FFFFFF;
  --banner-border: #E8E6F5;
}

/* Dark palette — OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --body-background-color: #12182A;
    --body-text-color: #E8E6F5;
    --card-background-color: #1B2438;
    --nav-background-color: #1B2438;
    --nav-border-bottom-color: #2F3A5C;
    --nav-current-border-bottom-color: #968AB6;
    --card-border-color: #2F3A5C;
    --down-background-color: #1B2438;
    --error-button-border-color: #968AB6;
    --submit-button-border-color: #968AB6;
    --legend-muted: #A8A3C4;
    --legend-surface: #1B2438;
    --legend-border: #2F3A5C;
    --banner-surface: #1B2438;
    --banner-border: #2F3A5C;
  }
}

/* Manual override via data-theme (optional js toggle) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --body-background-color: #12182A;
  --body-text-color: #E8E6F5;
  --card-background-color: #1B2438;
  --nav-background-color: #1B2438;
  --nav-border-bottom-color: #2F3A5C;
  --nav-current-border-bottom-color: #968AB6;
  --card-border-color: #2F3A5C;
  --down-background-color: #1B2438;
  --error-button-border-color: #968AB6;
  --submit-button-border-color: #968AB6;
  --legend-muted: #A8A3C4;
  --legend-surface: #1B2438;
  --legend-border: #2F3A5C;
  --banner-surface: #1B2438;
  --banner-border: #2F3A5C;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/*
 * Do NOT apply filter/opacity on article.graph — LiveStatus uses <article class="graph">
 * for whole cards; hue-rotate shifts card background + text (cream/reddish), not just PNG sparklines.
 * Brand Chart.js / Graphs CI via root graphBorderColor / graphBackgroundColor instead.
 */

/*
 * Live status monitor cards — same surface as article.up / past-incident cards.
 * Do not paint Live status with banned soft-error fills (#FEE2E2 / #3F1D1D — not Devora brand).
 * Dark card token is DESIGN #1B2438 (not operator shorthand #1b2432).
 */
section.live-status article {
  background-color: var(--card-background-color);
}

/* Do not hue-shift Chart.js canvases on detail pages */
section article canvas,
.container canvas,
canvas {
  filter: none !important;
}

/* Digdir-like legend surface (customBodyHtml).
 * Injected via customBodyHtml; status-website.js relocates aside to sit
 * directly below main article.up / .down / .degraded after DOM ready.
 */
.status-banner-hint,
.devora-status-legend {
  background: var(--banner-surface);
  border: 1px solid var(--banner-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 24px;
  box-shadow: 0 1px 2px rgba(36, 42, 86, 0.04);
}

.devora-status-legend {
  color: var(--body-text-color);
}

/* Spacing between operational banner and relocated legend (Sapper sibling order). */
main.container > article.up + .devora-status-legend,
main.container > article.down + .devora-status-legend,
main.container > article.degraded + .devora-status-legend {
  margin-top: 12px;
}

.devora-status-legend__title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--body-text-color);
}

.devora-status-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.devora-status-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--body-text-color);
}

.devora-status-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(36, 42, 86, 0.12);
}

.devora-status-legend__swatch--up {
  background: var(--status-success);
}

.devora-status-legend__swatch--degraded {
  background: var(--status-warning);
}

.devora-status-legend__swatch--partial {
  background: var(--status-warning);
  opacity: 0.65;
}

.devora-status-legend__swatch--down {
  background: var(--status-error);
}

.devora-status-legend__swatch--maintenance {
  background: var(--status-info);
}

.devora-status-legend__note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--legend-muted);
  line-height: 1.4;
}

.devora-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  border: 1px solid var(--card-border-color);
  background: var(--card-background-color);
  color: var(--body-text-color);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-family: system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(18, 24, 42, 0.12);
}

.devora-theme-toggle:hover {
  border-color: var(--nav-current-border-bottom-color);
}

@media (max-width: 640px) {
  .devora-status-legend__list {
    flex-direction: column;
    gap: 8px;
  }
}