/*
 * Xymon brand palette for Material for MkDocs, inspired by both Xymon sites:
 *   - xymon.sourceforge.io (xymonbody.css): black body, tan text #D8D8BF,
 *     teal links #00FFAA, green status band (bkg-green.gif, 125x1 repeat-y).
 *   - xymon.com (xymonmenu-blue.css): blue menu #456789 / #345678,
 *     cyan accent #00BBBB, pale-yellow highlight #EBEB77.
 * Result: blue header (xymon.com menu) + green left band (sourceforge body),
 * on a black page with tan text and teal links.
 */

:root {
  --xymon-blue:       #456789; /* xymon.com menu blue (header) */
  --xymon-blue-dark:  #345678; /* xymon.com menu blue, darker */
  --xymon-blue-light: #5a7fa3;
  --xymon-green:      #19a319; /* Xymon status green (left band) */
  --xymon-cyan:       #00bbbb; /* Xymon menu accent */
  --xymon-link-teal:  #00ffaa; /* classic Xymon link colour */
  --xymon-yellow:     #ebeb77; /* xymon.com menu highlight */

  /* Left green band: 5% of the viewport width, recalculated on resize.
     Text is indented by half the band so it starts where the green has faded. */
  --xymon-band-width: 5vw;

  /* Code font: Material's default Roboto Mono renders box-drawing glyphs
     (─ │ ┌ ┐ └ ┘ ► ▼) at a different advance width than ASCII, which breaks
     the right edge of the ASCII workflow diagrams. Use the OS monospace stack
     (these render box-drawing at true cell width). */
  --md-code-font: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--xymon-blue);
  --md-primary-fg-color--light: var(--xymon-blue-light);
  --md-primary-fg-color--dark:  var(--xymon-blue-dark);
  --md-accent-fg-color:         var(--xymon-cyan);
}

/* Dark scheme (default) — the classic Xymon look: black page, tan text,
   teal links, blue header (xymon.com menu), green band down the left edge. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--xymon-blue);
  --md-primary-fg-color--light: var(--xymon-blue-light);
  --md-primary-fg-color--dark:  var(--xymon-blue-dark);
  --md-accent-fg-color:         var(--xymon-cyan);
  --md-typeset-a-color:         var(--xymon-link-teal); /* iconic Xymon links */
  --md-default-bg-color:        #000000;  /* black body, like xymonbody.css */
  --md-default-fg-color:        #e8e8e8;  /* soft white — easier than pure #fff on black */
  --md-default-fg-color--light: #c4c4c4;
  --md-default-fg-color--lighter: #8f8f8f;
  --md-typeset-color:           #e8e8e8;
}

/* The green left band — on both light and dark schemes. bkg-green.gif is 125x1
   tiled repeat-y: a 125px green gradient down the left edge, fading into the page
   (black in dark, white in light). Fixed overlay; pointer-events:none so it
   never blocks clicks. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--xymon-band-width);
  background: linear-gradient(to right, #18d018 0%, #0f9e0f 30%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.95;
  pointer-events: none;
  z-index: 1000;
}

/* Keep all text — header (logo/title + tabs), left navigation AND page content
   — out of the band's green half: start it at 50% of the band, which rescales
   with the viewport. */
.md-header__inner,
.md-tabs .md-grid,
.md-sidebar--primary,
.md-content {
  padding-left: calc(var(--xymon-band-width) / 2);
}