/* GREEN DREAMS | DARK METALLIC BACKDROP V4 */

/* Darker overall laboratory finish */
html, body {
  background: #07150f !important;
}

body {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(225,255,235,.018) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      120deg,
      #10291e 0%,
      #06140e 45%,
      #173528 100%
    ) !important;
  background-attachment: fixed !important;
}

/* Sidebar: deep emerald gunmetal */
.rail {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      145deg,
      #203c2e,
      #091a12 48%,
      #142e20
    ) !important;
  border-color: #425f4a !important;
}

/* Sidebar buttons: darker steel, copper letters */
.rail button,
.rail .nav button {
  background:
    linear-gradient(
      155deg,
      #738478,
      #29382e 28%,
      #17271d 63%,
      #5e7463
    ) !important;
  color: #efa66b !important;
  border: 1px solid #758775 !important;
  text-shadow:
    0 1px 0 rgba(255,224,187,.35),
    0 -2px 2px #201108 !important;
}

.rail button.active,
.rail button[aria-current="page"] {
  color: #ffd09c !important;
  border: 2px solid #f5a14a !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.18),
    0 0 9px rgba(255,150,48,.48),
    0 0 20px rgba(255,130,28,.18) !important;
}

/* More restrained metallic reflections */
.panel,
.workspace,
.gd-pattern-panel,
#stations .station {
  border-color: #66816d !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.19),
    inset 0 -4px 6px rgba(0,0,0,.5),
    0 5px 15px rgba(0,0,0,.34) !important;
}

/* Restore selected workstation glow */
#stations .station.selected {
  border: 2px solid #f5a14a !important;
  box-shadow:
    inset 0 2px 3px rgba(255,220,165,.25),
    0 0 9px rgba(255,145,42,.46),
    0 0 20px rgba(255,130,28,.18) !important;
}

/* Dual official-logo embosses in desktop margins */
@media (min-width: 1100px) {
  body::before,
  body::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 28vh !important;
    width: min(13vw, 180px) !important;
    height: 48vh !important;

    background:
      url("green_dreams_logo.jpg")
      center / contain no-repeat !important;

    opacity: .09 !important;
    filter:
      grayscale(1)
      brightness(.55)
      contrast(1.8) !important;

    mix-blend-mode: luminosity !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  body::before {
    left: calc(240px + 1.5vw) !important;
    right: auto !important;
  }

  body::after {
    right: 1vw !important;
    left: auto !important;
  }
}

/* No side embosses on smaller screens */
@media (max-width: 1099px) {
  body::before,
  body::after {
    display: none !important;
  }
}

/* GREEN DREAMS | TILED EMBOSSED BRAND BACKGROUND */

/* Remove the two large floating watermarks */
body::before,
body::after {
  display: none !important;
}

/* Keep the metallic texture and tile the official logo */
body {
  background-image:
    linear-gradient(
      rgba(5, 18, 12, .92),
      rgba(5, 18, 12, .92)
    ),
    url("green_dreams_logo.jpg"),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(
      135deg,
      #173b29,
      #07170f 55%,
      #1c402e
    ) !important;

  background-size:
    auto,
    220px 220px,
    auto,
    auto !important;

  background-repeat:
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;

  background-attachment: fixed !important;
}

/* Subtle recessed edges around the main interface */
.app {
  box-shadow:
    inset 0 1px 1px rgba(225,255,235,.08),
    0 0 30px rgba(0,0,0,.18);
}

/* GREEN DREAMS | ENHANCED EMBOSSED CONTRAST */

body {
  background-image:
    linear-gradient(
      rgba(5,16,11,.84),
      rgba(5,16,11,.88)
    ),
    url("green_dreams_logo.jpg"),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.015) 1px,
      transparent 2px,
      transparent 5px
    ),
    linear-gradient(
      135deg,
      #173b29 0%,
      #0a1b13 35%,
      #133527 65%,
      #08130d 100%
    ) !important;

  background-size:
    auto,
    240px 240px,
    auto,
    auto !important;

  background-repeat:
    no-repeat,
    repeat,
    repeat,
    no-repeat !important;

  background-attachment: fixed !important;

  background-blend-mode:
    normal,
    soft-light,
    overlay,
    normal !important;
}


/* GREEN DREAMS | DARKER EMBOSSED TILED BACKDROP */

body {
  background-image:
    linear-gradient(
      rgba(3, 10, 7, 0.84),
      rgba(2, 8, 6, 0.92)
    ),
    radial-gradient(
      circle at 18% 16%,
      rgba(220, 255, 230, 0.07) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 78% 28%,
      rgba(220, 255, 230, 0.05) 0%,
      transparent 32%
    ),
    url("green_dreams_logo.jpg.PNG"),
    linear-gradient(
      135deg,
      #08130d 0%,
      #0b1c15 34%,
      #06100b 68%,
      #10241b 100%
    ) !important;

  background-size:
    auto,
    auto,
    auto,
    380px 380px,
    auto !important;

  background-position:
    center center,
    0 0,
    0 0,
    0 0,
    center center !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    no-repeat !important;

  background-attachment: fixed !important;

  background-blend-mode:
    normal,
    screen,
    screen,
    soft-light,
    normal !important;
}


/* GREEN DREAMS | RESTORED EMBOSSED LOGO TILES */

body {
  background-image:
    linear-gradient(
      rgba(3,10,7,.84),
      rgba(2,8,6,.92)
    ),
    radial-gradient(
      circle at 20% 15%,
      rgba(210,255,225,.07),
      transparent 35%
    ),
    url("green_dreams_logo.jpg"),
    linear-gradient(
      135deg,
      #08130d 0%,
      #0b1c15 34%,
      #06100b 68%,
      #10241b 100%
    ) !important;

  background-size:
    auto,
    auto,
    420px 420px,
    auto !important;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    no-repeat !important;

  background-position:
    center,
    center,
    0 0,
    center !important;

  background-attachment: fixed !important;

  background-blend-mode:
    normal,
    screen,
    normal,
    normal !important;
}