/* ──────────────────────────────────────────────────────────────────────────
   timeseries.js demo pages — shared chrome.

   Extracted from demo/index.html so all three demo pages (index, caldav,
   zabbix) share one look. Colours are declared once as custom properties on
   `body` and re-declared per theme, so a rule is written once instead of four
   times. `light` is the bare default and carries no class; `demo-nav.js` puts
   `theme-dark` / `theme-highContrast` / `theme-warm` on <body>.

   Page-specific rules (index's plot-type gallery and live-mode controls,
   caldav's chart height, …) stay in the page's own <style> block, which is
   loaded after this file and therefore wins on equal specificity.
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Palette: light (default) ─────────────────────────────────── */
body {
  --bg: linear-gradient(160deg, #f0f6ff 0%, #deeafc 40%, #c8daf5 100%);
  --text: #1a2e45;
  --accent: #2d6a9f;
  --muted: #5a7a9a;
  --hairline: rgba(45, 106, 159, 0.12);

  --nav-color: #2d6a9f;
  --nav-border-w: 1px;
  --nav-border-c: rgba(45, 106, 159, 0.25);
  --nav-hover-bg: rgba(45, 106, 159, 0.10);
  --nav-hover-color: #2d6a9f;
  --nav-current-bg: #2d6a9f;
  --nav-current-fg: #ffffff;
  --nav-current-border: #2d6a9f;

  --card-bg: #f0f6ff;
  --card-shadow:
    0 1px 3px rgba(30, 60, 100, 0.08),
    0 8px 32px rgba(30, 60, 100, 0.10),
    0 0 0 1px rgba(45, 106, 159, 0.10);

  --canvas-border: #e4edf8;
  --canvas-bg: #f8faff;

  --controls-bg: linear-gradient(180deg, #f4f9ff 0%, #edf4ff 100%);
  --group-bg: rgba(255, 255, 255, 0.7);
  --group-border-w: 1px;
  --group-border-c: #d0e2f7;
  --group-shadow: 0 1px 4px rgba(30, 60, 100, 0.06);
  --group-label: #7a9dc0;
  --divider: #d0e2f7;

  --btn-bg: #ffffff;
  --btn-fg: #1a2e45;
  --btn-border: rgba(45, 106, 159, 0.25);
  --btn-hover-bg: rgba(45, 106, 159, 0.08);

  --btn-ghost-color: #2d6a9f;
  --btn-ghost-hover-bg: rgba(45, 106, 159, 0.10);
  --btn-ghost-hover-color: #1a3a5c;

  --btn-primary-bg: linear-gradient(135deg, #2d6a9f 0%, #1a4f80 100%);
  --btn-primary-hover-bg: linear-gradient(135deg, #3578b0 0%, #225a90 100%);
  --btn-primary-shadow: 0 2px 6px rgba(29, 78, 128, 0.30);
  --btn-primary-hover-shadow: 0 3px 10px rgba(29, 78, 128, 0.38);
  --btn-primary-active-shadow: 0 1px 4px rgba(29, 78, 128, 0.25);

  --btn-secondary-bg: linear-gradient(135deg, #5594c8 0%, #3e7db5 100%);
  --btn-secondary-hover-bg: linear-gradient(135deg, #66a3d1 0%, #4d8cc0 100%);
  --btn-secondary-shadow: 0 2px 6px rgba(85, 148, 200, 0.30);
  --btn-secondary-hover-shadow: 0 3px 10px rgba(85, 148, 200, 0.38);

  --footer-bg: #f0f6ff;
  --footer-border: #e4edf8;
  --footer-text: #8aabca;

  --code-bg: rgba(45, 106, 159, 0.08);
  --pill-bg: rgba(45, 106, 159, 0.06);
  --pill-border: rgba(45, 106, 159, 0.3);
  --pill-color: #2d6a9f;

  --theme-active-border: #ffffff;
  --theme-active-ring: #2d6a9f;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
}

/* ── Palette: dark ────────────────────────────────────────────── */
body.theme-dark {
  --bg: linear-gradient(160deg, #1a1f2e 0%, #141928 40%, #0f1420 100%);
  --text: #c8d8e8;
  --accent: #5594c8;
  --muted: #5a7a9a;
  --hairline: rgba(90, 148, 200, 0.18);

  --nav-color: #6aabdf;
  --nav-border-c: #2a3a54;
  --nav-hover-bg: rgba(90, 148, 200, 0.15);
  --nav-hover-color: #9acce8;
  --nav-current-bg: #2d6a9f;
  --nav-current-fg: #ffffff;
  --nav-current-border: #3a6a9a;

  --card-bg: #1a1f2e;
  --card-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(80, 120, 180, 0.18);

  --canvas-border: #2a3348;
  --canvas-bg: #0f1420;

  --controls-bg: linear-gradient(180deg, #1e2438 0%, #181d2e 100%);
  --group-bg: rgba(30, 38, 58, 0.8);
  --group-border-c: #2a3a54;
  --group-label: #4a6a8a;
  --divider: #2a3a54;

  --btn-bg: #232a3d;
  --btn-fg: #c8d8e8;
  --btn-border: #2a3a54;
  --btn-hover-bg: rgba(90, 148, 200, 0.15);

  --btn-ghost-color: #6aabdf;
  --btn-ghost-hover-bg: rgba(90, 148, 200, 0.15);
  --btn-ghost-hover-color: #9acce8;

  --footer-bg: #151a28;
  --footer-border: #2a3348;
  --footer-text: #4a6a8a;

  --code-bg: rgba(90, 148, 200, 0.14);
  --pill-bg: rgba(90, 148, 200, 0.12);
  --pill-border: #2a3a54;
  --pill-color: #6aabdf;

  --theme-active-border: #0f1420;
  --theme-active-ring: #6aabdf;
}

/* ── Palette: high contrast ───────────────────────────────────── */
body.theme-highContrast {
  --bg: #ffffff;
  --text: #000000;
  --accent: #0050c8;
  --muted: #333333;
  --hairline: #000000;

  --nav-color: #0050c8;
  --nav-border-w: 2px;
  --nav-border-c: #000000;
  --nav-hover-bg: #eeeeee;
  --nav-hover-color: #0050c8;
  --nav-current-bg: #0050c8;
  --nav-current-fg: #ffffff;
  --nav-current-border: #000000;

  --card-bg: #ffffff;
  --card-shadow: 0 0 0 2px #000000;

  --canvas-border: #000000;
  --canvas-bg: #ffffff;

  --controls-bg: #eeeeee;
  --group-bg: #ffffff;
  --group-border-w: 2px;
  --group-border-c: #000000;
  --group-label: #222222;
  --divider: #000000;

  --btn-bg: #ffffff;
  --btn-fg: #000000;
  --btn-border: #000000;
  --btn-hover-bg: #ddeeff;

  --btn-ghost-color: #0050c8;
  --btn-ghost-hover-bg: #ddeeff;
  --btn-ghost-hover-color: #0050c8;

  --footer-bg: #f0f0f0;
  --footer-border: #000000;
  --footer-text: #000000;

  --code-bg: #eeeeee;
  --pill-bg: #ddeeff;
  --pill-border: #000000;
  --pill-color: #0050c8;

  --theme-active-border: #ffffff;
  --theme-active-ring: #000000;
}

/* ── Palette: warm ────────────────────────────────────────────── */
body.theme-warm {
  --bg: linear-gradient(160deg, #fdf6ec 0%, #f5e8d0 40%, #ecdabb 100%);
  --text: #3d2200;
  --accent: #a05a10;
  --muted: #8a6030;
  --hairline: rgba(160, 100, 30, 0.18);

  --nav-color: #a05a10;
  --nav-border-c: #d8b878;
  --nav-hover-bg: rgba(160, 90, 16, 0.10);
  --nav-hover-color: #7a3e08;
  --nav-current-bg: #a05a10;
  --nav-current-fg: #ffffff;
  --nav-current-border: #a05a10;

  --card-bg: #fdf6ec;
  --card-shadow:
    0 1px 3px rgba(80, 40, 0, 0.08),
    0 8px 32px rgba(80, 40, 0, 0.12),
    0 0 0 1px rgba(160, 100, 30, 0.15);

  --canvas-border: #e8d0a8;
  --canvas-bg: #fffef8;

  --controls-bg: linear-gradient(180deg, #fdf3e3 0%, #f8ecda 100%);
  --group-bg: rgba(255, 252, 240, 0.8);
  --group-border-c: #d8b878;
  --group-label: #b08040;
  --divider: #d8b878;

  --btn-bg: #fffcf0;
  --btn-fg: #3d2200;
  --btn-border: #d8b878;
  --btn-hover-bg: rgba(160, 90, 16, 0.10);

  --btn-ghost-color: #a05a10;
  --btn-ghost-hover-bg: rgba(160, 90, 16, 0.10);
  --btn-ghost-hover-color: #7a3e08;

  --btn-primary-bg: linear-gradient(135deg, #a05a10 0%, #7a3e08 100%);
  --btn-primary-hover-bg: linear-gradient(135deg, #b8681a 0%, #8c4a0c 100%);
  --btn-primary-shadow: 0 2px 6px rgba(100, 50, 8, 0.30);
  --btn-primary-hover-shadow: 0 3px 10px rgba(100, 50, 8, 0.38);
  --btn-primary-active-shadow: 0 1px 4px rgba(100, 50, 8, 0.25);

  --btn-secondary-bg: linear-gradient(135deg, #c87828 0%, #a05a10 100%);
  --btn-secondary-hover-bg: linear-gradient(135deg, #d68a3c 0%, #b8681a 100%);
  --btn-secondary-shadow: 0 2px 6px rgba(160, 90, 16, 0.30);
  --btn-secondary-hover-shadow: 0 3px 10px rgba(160, 90, 16, 0.38);

  --footer-bg: #fdf6ec;
  --footer-border: #e8d0a8;
  --footer-text: #b08040;

  --code-bg: rgba(160, 90, 16, 0.10);
  --pill-bg: rgba(200, 120, 40, 0.10);
  --pill-border: #d8b878;
  --pill-color: #a05a10;

  --theme-active-border: #fffef8;
  --theme-active-ring: #a05a10;
}

/* ── Header ───────────────────────────────────────────────────── */
header {
  padding: 2rem 2.5rem 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

header h1 span { color: var(--accent); }

header p { font-size: 0.85rem; color: var(--muted); }

/* ── Shared nav + theme picker (built by demo-nav.js) ─────────── */
#demo-nav {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.demo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.demo-nav a {
  font-size: 0.85rem;
  color: var(--nav-color);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: var(--nav-border-w) solid var(--nav-border-c);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.demo-nav a:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-color);
}

.demo-nav a[aria-current="page"] {
  background: var(--nav-current-bg);
  color: var(--nav-current-fg);
  border-color: var(--nav-current-border);
}

.demo-nav a:focus-visible,
.theme-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A labelled pair of nav links (demo-nav.js's PAGES group form) — same filled
   pill-box idiom as .theme-picker right below, which is what makes it read as
   part of the header rather than an extra control. It reuses the --group-*
   properties every palette already declares for .control-group, so it
   re-themes without a colour of its own.

   NOT .control-group: that class is tuned for the .controls bars and gets
   `flex: 1 1 100%` under 640px, which would blow the nav apart. */
.nav-group {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.25rem;
  border-radius: 999px;
  background: var(--group-bg);
  border: var(--group-border-w) solid var(--group-border-c);
}

.nav-group-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--group-label);
  padding: 0 0.1rem 0 0.45rem;
  white-space: nowrap;
  user-select: none;
}

/* Tighter than a free-standing pill: the box adds its own padding around them,
   and this lands the group at the same height as the .theme-picker next to it,
   so the header's two boxes sit on one line instead of nearly doing so. */
.demo-nav .nav-group a {
  padding: 0.22rem 0.55rem;
}

/* The box supplies the outline, so the links inside drop theirs — the *colour*
   only, keeping the width, so nothing shifts when :hover or [aria-current]
   fills one in. Exactly what .theme-btn does with its transparent 2px border.
   The :not() is load-bearing: without it this would also blank the current
   page's border, which .demo-nav a[aria-current="page"] sets a few rules up. */
.demo-nav .nav-group a:not([aria-current="page"]) {
  border-color: transparent;
}

.theme-picker {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--group-bg);
  border: var(--group-border-w) solid var(--group-border-c);
}

.theme-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, transform 0.1s;
}

.theme-btn:hover { transform: scale(1.18); }

.theme-btn.active {
  border-color: var(--theme-active-border);
  box-shadow: 0 0 0 2px var(--theme-active-ring);
}

.theme-btn-light { background: linear-gradient(135deg, #f0f6ff, #c8daf5); }
.theme-btn-dark  { background: linear-gradient(135deg, #1a1f2e, #2a3a54); }
.theme-btn-hc    { background: linear-gradient(135deg, #ffffff, #000000); }
.theme-btn-warm  { background: linear-gradient(135deg, #fdf6ec, #c87828); }

/* ── Main card ────────────────────────────────────────────────── */
main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.chart-card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* The tooltip and the series legend are supplied and styled by the library
   (TimeSeries.attachTooltip / attachLegend); both theme themselves from the
   chart palette, so the demos carry no CSS for them. */

/* ── Canvas wrapper ───────────────────────────────────────────── */
.canvas-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--canvas-border);
}

.canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--canvas-bg);
  touch-action: none;
}

/* ── Controls bar ─────────────────────────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--controls-bg);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--group-bg);
  border: var(--group-border-w) solid var(--group-border-c);
  border-radius: 10px;
  padding: 0.25rem;
  box-shadow: var(--group-shadow);
}

.group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--group-label);
  padding: 0 0.5rem 0 0.4rem;
  user-select: none;
}

.divider {
  width: 1px;
  height: 24px;
  background: var(--divider);
  flex-shrink: 0;
}

.spacer { flex: 1; }

/* ── Buttons ──────────────────────────────────────────────────── */
button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--btn-border);
  border-radius: 7px;
  padding: 0.42rem 0.85rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  user-select: none;
}

/* The `display` above would otherwise defeat the `hidden` attribute: the UA
   rule implementing it is at the lowest possible priority, so any author
   `display` beats it. Both live demo pages keep a button hidden in the markup
   and unhide it from script (#reconnect), and would show it from the start. */
button[hidden] { display: none; }

button:hover { background: var(--btn-hover-bg); }

/* Toggle state for the plain, unclassed buttons the smaller demo pages use
   (caldav's layout switch). Scoped with :not([class]) so it never repaints a
   .btn-ghost / .btn-primary / .btn-secondary that also carries aria-pressed. */
button[aria-pressed="true"]:not([class]) {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}

/* The three variants are borderless — they carry their own fill. */
.btn-ghost, .btn-primary, .btn-secondary { border: none; }

/* Ghost (prev/next arrow) buttons */
.btn-ghost {
  background: transparent;
  color: var(--btn-ghost-color);
}
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-color);
}
.btn-ghost:active { transform: scale(0.94); }

/* Primary (current period) button */
.btn-primary {
  background: var(--btn-primary-bg);
  color: #ffffff;
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover {
  background: var(--btn-primary-hover-bg);
  box-shadow: var(--btn-primary-hover-shadow);
}
.btn-primary:active {
  transform: scale(0.95);
  box-shadow: var(--btn-primary-active-shadow);
}

/* Secondary (rolling 24 h) */
.btn-secondary {
  background: var(--btn-secondary-bg);
  color: #ffffff;
  box-shadow: var(--btn-secondary-shadow);
}
.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg);
  box-shadow: var(--btn-secondary-hover-shadow);
}
.btn-secondary:active { transform: scale(0.95); }

/* ── Status line / pill / hint / inline code ──────────────────── */
.status {
  font-size: 0.78rem;
  color: var(--muted);
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--pill-border);
  color: var(--pill-color);
  background: var(--pill-bg);
}

.hint {
  padding: 0.9rem 1.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  line-height: 1.5;
}

code {
  background: var(--code-bg);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.4rem;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.chart-footer span {
  font-size: 0.75rem;
  color: var(--footer-text);
}

/* Without this the browser's default link blue is unreadable on the dark and
   high-contrast footers. */
.chart-footer a { color: var(--nav-color); }

/* ── Responsive / mobile ──────────────────────────────────────── */
@media (max-width: 640px) {
  header {
    padding: 1rem 1rem 0.6rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    flex-shrink: 0;
  }

  /* The nav drops under the title and wraps instead of overflowing. */
  #demo-nav {
    margin-left: 0;
    align-self: stretch;
    gap: 0.5rem;
  }

  .controls {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .control-group {
    flex: 1 1 100%;        /* each group spans the full row */
    justify-content: space-between;
  }

  .divider { display: none; }

  button {
    font-size: 0.76rem;
    padding: 0.38rem 0.55rem;
  }

  .chart-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    flex-shrink: 0;
  }
}
