/*
 * OLED Crimson — a Heroic Games Launcher theme
 * True black (#000) everywhere for OLED panels, with a crimson sidebar.
 *
 * Install: put this file in your Custom Themes folder
 * (Heroic → Settings → Accessibility → Custom Themes Path),
 * then pick "oled-crimson" under Select Theme.
 *
 * Heroic sets the body class from the file name, so if you rename
 * this file, rename the "body.oled-crimson" selectors to match.
 */

body.oled-crimson {
  /* Crimson palette */
  --crimson: #dc143c;
  --crimson-bright: #ff2d55;
  --crimson-deep: #7a0019;
  --crimson-darkest: #2b0009;

  /* Backgrounds — true black for OLED */
  --background: #000000;
  --background-darker: #000000;
  --background-darker-80: #000000e0;
  --background-lighter: #0a0a0a;
  --background-secondary: #0a0a0a;
  --body-background: #000000;
  --current-background: #000000;
  --gradient-body-background: #000000;
  --input-background: #0d0d0d;
  --search-bar-background: #0d0d0d;
  --search-bar-border: #2a0a10;
  --modal-background: #000000;
  --modal-backdrop: #000000e6;
  --modal-border: var(--crimson-deep);
  --controller-hints-background: transparent;
  --icons-background: #0d0d0d;
  --divider: #1f0a0e;

  /* Accent */
  --accent: var(--crimson);
  --accent-overlay: var(--crimson-bright);
  --link-highlight: var(--crimson-bright);
  --button-stroke: var(--crimson);

  /* Sidebar — the crimson side */
  --navbar-background: var(--crimson-deep);
  --navbar-active-background: #000000;
  --navbar-accent: #ffffff;
  --navbar-active: #ffffff;
  --navbar-inactive: #f3c2cc;

  /* Text */
  --text-default: #ececec;
  --text-secondary: #a8a8a8;
  --text-tertiary: #000000;
  --text-quartenary: #555555;
  --text-title: #ffffff;
  --text-hover: var(--crimson-bright);
  --text-gametitle: #ffffff;
  --text-danger: var(--crimson-bright);

  /* Buttons */
  --primary: var(--crimson);
  --primary-hover: var(--crimson-bright);
  --primary-button: var(--crimson);
  --secondary: var(--crimson-deep);
  --secondary-button: var(--crimson);
  --secondary-button-overlay: var(--crimson-bright);
  --play-button: var(--crimson);
  --install-button: var(--crimson);
  --download-button: var(--crimson-deep);
  --download-button-overlay: var(--crimson);
  --success-button: var(--crimson);
  --disabled-button: #1a1a1a;
  --disabled-button-overlay: #2a2a2a;

  /* Status */
  --success: #e8e8e8;
  --success-hover: #ffffff;
  --danger: #b00020;
  --danger-hover: var(--crimson-bright);

  /* Icons */
  --action-icon: #d0d0d0;
  --action-icon-hover: var(--crimson-bright);
  --action-icon-active: var(--crimson);
  --icon-disabled: #3a3a3a;

  /* Game cards */
  --gamecard-title-color: #000000d9;
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 1.8%,
    var(--gamecard-title-color) 45%
  );

  /* On-screen keyboard */
  --osk-background: #000000;
  --osk-button-background: #0d0d0d;
  --osk-button-border: var(--crimson-deep);

  /* Tour popups */
  --tour-popup-background: #0d0d0d;
  --tour-bullet-active: var(--crimson);
  --tour-bullet-inactive: var(--crimson-deep);

  /* Alphabet filter */
  --alphabet-filter-accent-color: var(--crimson);
  --alphabet-filter-accent-hover: var(--crimson-bright);
}

/* Sidebar: crimson fading toward black, with a bright edge */
body.oled-crimson .Sidebar {
  background: linear-gradient(
    180deg,
    var(--crimson-deep) 0%,
    #4a000f 55%,
    var(--crimson-darkest) 100%
  ) !important;
  border-right: 1px solid var(--crimson);
}

/* Dialogs and menus stay pure black with a crimson outline */
body.oled-crimson .MuiDialog-paper {
  background-color: #000000;
  border: 1px solid var(--crimson-deep);
}

body.oled-crimson .contextMenu > .MuiPaper-root,
body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
  background-color: #000000;
  border: 1px solid var(--crimson-deep);
}

body.oled-crimson .contextMenu .MuiMenuItem-root:hover {
  background-color: var(--crimson-darkest);
}

body.oled-crimson .selectFieldWrapper select > option {
  background: #000000;
}

body.oled-crimson .heroicVersion {
  color: var(--navbar-inactive);
}

/* Crimson keyboard/controller focus ring */
body.oled-crimson *:focus-visible {
  outline: 2px solid var(--crimson-bright);
  outline-offset: 2px;
}

/* Thin crimson scrollbars on black */
body.oled-crimson ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000000;
}

body.oled-crimson ::-webkit-scrollbar-thumb {
  background: var(--crimson-deep);
  border-radius: 4px;
}

body.oled-crimson ::-webkit-scrollbar-thumb:hover {
  background: var(--crimson);
}