/* SuccServer theme for the RomM web UI - matches succserver.xyz and Seerr (add.succserver.xyz).
   Same tokens as C:\DockerData\Seerr\login-proxy\succserver-theme.css; stars.js is a copy of
   succserver-stars.js (animated starfield + nebula on a fixed layer, z-index 0).
   Injected into RomM's index.html by nginx (see ../default.conf.template, "SuccServer theme").
   RomM's UI is Vuetify: colours are --v-theme-* variables holding "r,g,b" triplets.
   To turn the theme off: restore default.conf.template.bak-before-theme and
   `docker compose up -d --force-recreate romm`. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --succ-bg: #020309;
  --succ-ink: #e2e6fa;
  --succ-muted: #7a82a6;
  --succ-faint: #4a5276;
  --succ-cyan: #5cdbe9;
  --succ-violet: #7a4cf0;
  --succ-glass: rgba(6, 8, 22, 0.62);
  --succ-glass-strong: rgba(4, 6, 16, 0.9);
  --succ-line: rgba(125, 140, 230, 0.11);
  --succ-line-hot: rgba(92, 219, 233, 0.5);
  --succ-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --succ-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r-font-family-sans: var(--succ-sans);
  --r-font-family-mono: var(--succ-mono);
}

/* ---- Vuetify palette -> site tokens (applies to RomM's dark and light themes alike) ---- */
:root,
[class*="v-theme--"] {
  --v-theme-background: 2, 3, 9 !important;
  --v-theme-on-background: 226, 230, 250 !important;
  --v-theme-surface: 6, 8, 22 !important;
  --v-theme-on-surface: 226, 230, 250 !important;
  --v-theme-surface-variant: 22, 27, 54 !important;
  --v-theme-on-surface-variant: 122, 130, 166 !important;
  --v-theme-surface-light: 14, 17, 38 !important;
  --v-theme-on-surface-light: 226, 230, 250 !important;
  --v-theme-surface-bright: 30, 36, 70 !important;
  --v-theme-on-surface-bright: 226, 230, 250 !important;
  --v-theme-toplayer: 4, 6, 16 !important;
  --v-theme-primary: 122, 76, 240 !important;       /* violet buttons, like Seerr */
  --v-theme-on-primary: 255, 255, 255 !important;
  --v-theme-secondary: 92, 219, 233 !important;     /* cyan accents */
  --v-theme-on-secondary: 2, 3, 9 !important;
  --v-theme-accent: 92, 219, 233 !important;
  --v-theme-romm-gold: 242, 182, 109 !important;
  --v-theme-error: 242, 182, 109 !important;
  --v-theme-success: 67, 220, 150 !important;
  --v-theme-info: 77, 120, 238 !important;
}

/* ---- RomM 5.3 "v2" design system (--r-color-*) -> site tokens ---- */
:root, [class*="v-theme--"] {
  --r-color-brand-primary: #7a4cf0 !important;
  --r-color-brand-primary-hover: #8b62f3 !important;
  --r-color-brand-primary-pressed: #6338d8 !important;
  --r-color-brand-secondary: #5cdbe9 !important;
  --r-color-brand-secondary-hover: #9ff4ff !important;
  --r-color-brand-secondary-pressed: #2bb7c9 !important;
  --r-color-brand-accent: #5cdbe9 !important;
  --r-color-brand-accent-hover: #9ff4ff !important;
  --r-color-avatar-gradient: linear-gradient(135deg, #5cdbe9, #7a4cf0) !important;
  --r-color-bg: #020309 !important;
  --r-color-canvas-bg: #020309 !important;
  --r-color-canvas-bg-deep: #020309 !important;
  --r-color-bg-elevated: rgba(6, 8, 22, 0.62) !important;
  --r-color-surface: rgba(255, 255, 255, 0.024) !important;
  --r-color-surface-hover: rgba(92, 219, 233, 0.08) !important;
  --r-color-border: rgba(125, 140, 230, 0.11) !important;
  --r-color-border-strong: rgba(125, 140, 230, 0.22) !important;
  --r-color-panel-border: rgba(125, 140, 230, 0.11) !important;
  --r-color-overlay-border: rgba(125, 140, 230, 0.18) !important;
  --r-color-overlay-border-strong: rgba(92, 219, 233, 0.5) !important;
  --r-color-tooltip-bg: rgba(4, 6, 16, 0.94) !important;
  --r-color-tooltip-border: rgba(125, 140, 230, 0.18) !important;
  --r-color-auth-glass: rgba(6, 8, 22, 0.62) !important;
  --r-color-toast-bg: rgba(4, 6, 16, 0.92) !important;
  --r-glass-bar-bg: rgba(4, 6, 16, 0.78) !important;
  --r-glass-bar-filter: blur(14px) !important;
  --r-font-family-display: var(--succ-sans) !important;
  --r-slider-accent: #5cdbe9 !important;
}
/* RomM's own layered purple backdrop (r-v2-bg) would cover the starfield - hide it. */
.r-v2-bg, [class*="r-v2-bg__"] { display: none !important; }

/* ---- Base: deep space; stars.js draws #succ-space behind everything (z-index 0) ---- */
html, body { background: var(--succ-bg) !important; color: var(--succ-ink); }
.v-application { position: relative; z-index: 1; background: transparent !important; }
.v-main, .v-application__wrap { background: transparent !important; }

/* Font: RomM hard-codes Roboto in many places. Icons (.mdi) and code keep their own fonts. */
.v-application,
.v-application *:not(.mdi):not([class*="mdi-"]):not(code):not(pre):not(kbd) {
  font-family: var(--succ-sans) !important;
}
h1, h2, h3, .text-h4, .text-h5, .text-h6 { letter-spacing: -.01em; }
.text-caption.text-uppercase, .v-chip, .v-badge__badge { font-family: var(--succ-mono) !important; letter-spacing: .08em; }

/* ---- Surfaces: glass panels like the site/Seerr ---- */
.v-navigation-drawer, .v-app-bar, .v-toolbar, .v-bottom-navigation {
  background-color: var(--succ-glass-strong) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--succ-line) !important;
}
.v-card, .v-sheet:not(.v-navigation-drawer):not(.v-app-bar):not(.v-toolbar), .v-expansion-panel, .v-list {
  background-color: var(--succ-glass) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.v-card { border: 1px solid var(--succ-line); border-radius: 14px !important; }
/* menus, dialogs, tooltips float over content - keep them nearly opaque */
.v-overlay__content > .v-card, .v-overlay__content > .v-sheet, .v-overlay__content > .v-list, .v-menu .v-list {
  background-color: var(--succ-glass-strong) !important;
  border: 1px solid var(--succ-line);
}
.v-divider { border-color: var(--succ-line) !important; opacity: 1; }

/* ---- Game covers: same hover glow as Seerr posters ---- */
.v-card:hover .v-img, a:hover .v-img { box-shadow: 0 0 0 1px var(--succ-line-hot), 0 0 24px rgba(92, 219, 233, .25); border-radius: 12px; }

/* ---- Buttons ---- */
.v-btn.bg-primary, .v-btn.bg-romm-accent-1, .v-btn--variant-flat.bg-primary {
  border-radius: 12px !important; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 0 18px rgba(122, 76, 240, .35) !important;
}
.text-primary { color: var(--succ-cyan) !important; }   /* links/accent text in cyan, like the site */

/* ---- Inputs ---- */
.v-field {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
}
.v-field--focused { box-shadow: 0 0 0 3px rgba(92, 219, 233, .15); }
.v-field__outline { --v-field-border-opacity: 1; color: var(--succ-line) !important; }
.v-field--focused .v-field__outline { color: var(--succ-line-hot) !important; }

/* ---- Scrollbars ---- */
* { scrollbar-color: rgba(125, 140, 230, .25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(125, 140, 230, .25); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Top-left logo: "Game Library" instead of the ROMM wordmark ---- */
.r-v2-nav__logo-word { width: auto !important; height: 22px !important; min-height: 22px !important; overflow: visible !important; display: flex !important; align-items: center; }
.r-v2-nav__logo-word img { display: none !important; }
.r-v2-nav__logo-word::after {
  content: "Game Library";
  font-family: var(--succ-sans); font-weight: 700; font-size: 17px; letter-spacing: -.01em;
  color: var(--succ-ink); white-space: nowrap;
}