/*
 * OLED Crimson — a Heroic Games Launcher theme
 * Styled after qui (shadcn/ui): true-black surfaces, hairline borders,
 * soft rounded pills, and crimson used sparingly as the accent.
 *
 * Heroic sets the body class from the file name. If you rename this
 * file, rename the "body.oled-crimson" selectors to match.
 */

body.oled-crimson {
  /* shadcn-style tokens, OLED edition */
  --q-bg: #000000;
  --q-card: #0a0a0a;
  --q-muted: #141414;
  --q-hover: #1a1a1a;
  --q-border: #1f1f1f;
  --q-border-strong: #2a2a2a;
  --q-fg: #fafafa;
  --q-fg-muted: #a1a1aa;
  --q-fg-subtle: #71717a;
  --q-crimson: #dc143c;
  --q-crimson-hover: #e8304f;
  --q-crimson-soft: rgba(220, 20, 60, 0.12);
  --q-radius: 8px;

  /* Backgrounds */
  --background: var(--q-bg);
  --background-darker: var(--q-bg);
  --background-darker-80: rgba(0, 0, 0, 0.85);
  --background-lighter: var(--q-muted);
  --background-secondary: var(--q-card);
  --body-background: var(--q-bg);
  --current-background: var(--q-bg);
  --gradient-body-background: var(--q-bg);
  --input-background: var(--q-bg);
  --search-bar-background: var(--q-bg);
  --search-bar-border: var(--q-border);
  --modal-background: var(--q-bg);
  --modal-backdrop: rgba(0, 0, 0, 0.8);
  --modal-border: var(--q-border);
  --controller-hints-background: transparent;
  --icons-background: var(--q-muted);
  --divider: var(--q-border);

  /* Accent */
  --accent: var(--q-crimson);
  --accent-overlay: var(--q-crimson-hover);
  --link-highlight: var(--q-crimson);
  --button-stroke: var(--q-border-strong);

  /* Sidebar — black, separated by a hairline, crimson only on the active item */
  --navbar-background: var(--q-bg);
  --navbar-active-background: var(--q-muted);
  --navbar-accent: var(--q-crimson);
  --navbar-active: var(--q-fg);
  --navbar-inactive: var(--q-fg-muted);

  /* Text */
  --text-default: var(--q-fg);
  --text-secondary: var(--q-fg-muted);
  --text-tertiary: var(--q-bg);
  --text-quartenary: var(--q-fg-subtle);
  --text-title: var(--q-fg);
  --text-hover: var(--q-fg);
  --text-gametitle: var(--q-fg);
  --text-danger: var(--q-crimson-hover);

  /* Buttons */
  --primary: var(--q-crimson);
  --primary-hover: var(--q-crimson-hover);
  --primary-button: var(--q-crimson);
  --secondary: var(--q-muted);
  --secondary-button: var(--q-crimson);
  --secondary-button-overlay: var(--q-crimson-hover);
  --play-button: var(--q-crimson);
  --install-button: var(--q-crimson);
  --download-button: var(--q-muted);
  --download-button-overlay: var(--q-hover);
  --success-button: var(--q-crimson);
  --disabled-button: var(--q-muted);
  --disabled-button-overlay: var(--q-hover);

  /* Status */
  --success: #22c55e;
  --success-hover: #4ade80;
  --danger: #b91c1c;
  --danger-hover: #ef4444;

  /* Icons */
  --action-icon: var(--q-fg-muted);
  --action-icon-hover: var(--q-fg);
  --action-icon-active: var(--q-crimson);
  --icon-disabled: #3f3f46;

  /* Game cards */
  --gamecard-title-color: rgba(0, 0, 0, 0.85);
  --gradient-gamecard: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    var(--gamecard-title-color) 100%
  );

  /* On-screen keyboard */
  --osk-background: var(--q-bg);
  --osk-button-background: var(--q-muted);
  --osk-button-border: var(--q-border);

  /* Tour popups */
  --tour-popup-background: var(--q-card);
  --tour-bullet-active: var(--q-crimson);
  --tour-bullet-inactive: var(--q-border-strong);

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

  font-family: Inter, "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
}

/* ---------- Sidebar ---------- */

body.oled-crimson .Sidebar {
  background: var(--q-bg) !important;
  border-right: 1px solid var(--q-border);
}

/* Nav items as soft rounded pills, like qui */
body.oled-crimson .Sidebar a,
body.oled-crimson .Sidebar .Sidebar__item {
  border-radius: 6px;
  color: var(--q-fg-muted);
  transition: background-color 120ms ease, color 120ms ease;
}

body.oled-crimson .Sidebar a:hover,
body.oled-crimson .Sidebar .Sidebar__item:hover {
  background-color: var(--q-hover);
  color: var(--q-fg);
}

/* Active item: muted pill with a thin crimson marker on the left */
body.oled-crimson .Sidebar a.active,
body.oled-crimson .Sidebar .Sidebar__item.active {
  background-color: var(--q-muted);
  color: var(--q-fg);
  box-shadow: inset 2px 0 0 var(--q-crimson);
}

body.oled-crimson .Sidebar a.active svg,
body.oled-crimson .Sidebar .Sidebar__item.active svg {
  color: var(--q-crimson);
}

body.oled-crimson .heroicVersion {
  color: var(--q-fg-subtle);
}

/* ---------- Surfaces ---------- */

/* Dialogs: black card, hairline border, rounded */
body.oled-crimson .MuiDialog-paper {
  background-color: var(--q-bg);
  border: 1px solid var(--q-border);
  border-radius: 12px;
  box-shadow: none;
}

/* Context menus */
body.oled-crimson .contextMenu > .MuiPaper-root,
body.oled-crimson .contextMenu > .MuiPaper-root > .MuiMenu-list {
  background-color: var(--q-card);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius);
}

body.oled-crimson .contextMenu .MuiMenuItem-root {
  border-radius: 4px;
  margin: 0 4px;
}

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

/* Game cards: rounded with a hairline border */
body.oled-crimson .gameCard {
  border-radius: var(--q-radius);
  border: 1px solid var(--q-border);
  overflow: hidden;
}

body.oled-crimson .gameCard:hover {
  border-color: var(--q-border-strong);
}

/* ---------- Inputs ---------- */

body.oled-crimson .searchBarInput,
body.oled-crimson .selectFieldWrapper select,
body.oled-crimson input[type="text"],
body.oled-crimson input[type="number"] {
  background-color: var(--q-bg);
  border: 1px solid var(--q-border);
  border-radius: 6px;
  color: var(--q-fg);
}

body.oled-crimson .searchBarInput::placeholder {
  color: var(--q-fg-subtle);
}

body.oled-crimson .selectFieldWrapper select > option {
  background: var(--q-bg);
}

/* ---------- Buttons ---------- */

body.oled-crimson .button,
body.oled-crimson button.button {
  border-radius: 6px;
  font-weight: 500;
}

body.oled-crimson .button.is-primary {
  background-color: var(--q-crimson);
  color: #ffffff;
}

body.oled-crimson .button.is-primary:hover {
  background-color: var(--q-crimson-hover);
}

body.oled-crimson .button.is-secondary,
body.oled-crimson .button.is-tertiary {
  background-color: transparent;
  border: 1px solid var(--q-border-strong);
  color: var(--q-fg);
}

body.oled-crimson .button.is-secondary:hover,
body.oled-crimson .button.is-tertiary:hover {
  background-color: var(--q-hover);
}

/* ---------- Focus & scrollbars ---------- */

body.oled-crimson *:focus-visible {
  outline: 2px solid var(--q-crimson);
  outline-offset: 2px;
}

body.oled-crimson ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

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

body.oled-crimson ::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}