/* ==========================================================================
   FATTERFLIX skin over RomM.

   Loaded LAST from a patched index.html (romm-skin/index.html), bind-mounted
   into the container at /var/www/html/fatterflix-skin.css -- RomM has no
   theming system of its own, so this rides the cascade instead. Friends only
   ever see the /login and /pair/device pages (FatterPlay pairing), but the
   Vuetify variable swap below unifies the whole app for anyone who wanders in.

   RomM upgrades: assets/index-*.js|css hashes change, so romm-skin/index.html
   must be re-extracted from the new image and re-patched (title + skin link).
   The deploy script does this -- see romm-skin/deploy.sh.
   ========================================================================== */

/* Vuetify carries theme colors as bare rgb triplets. Purple -> Fatterflix red. */
:root, .v-theme--dark, .v-theme--light {
  --v-theme-primary: 196, 30, 30 !important;
  --v-theme-secondary: 138, 21, 21 !important;
  --v-theme-romm-accent-1: 255, 51, 51 !important;
  --v-theme-background: 10, 10, 10 !important;
  --v-theme-surface: 18, 18, 18 !important;
  --v-theme-toplayer: 24, 24, 24 !important;
}

html, body, .v-application { background: #0a0a0a !important; }

/* The login/pair backdrop is an inline-SVG purple blobscape; replace it with a
   quiet red-on-black glow that matches the Authentik login. */
.r-v2-auth__bg {
  background-color: #0a0a0a !important;
  background-image:
    radial-gradient(60% 80% at 15% 20%, rgba(196, 30, 30, 0.26), transparent 60%),
    radial-gradient(50% 70% at 85% 85%, rgba(138, 21, 21, 0.32), transparent 65%) !important;
}

.auth-card {
  background: rgba(12, 12, 12, 0.94) !important;
  border: 1px solid rgba(196, 30, 30, 0.55) !important;
}

/* RomM's isotipo becomes the FATTERFLIX wordmark, same two-tone as Authentik.
   The r-img wrapper is sized to the 80px logo and clips overflow, so it must be
   un-boxed or the wordmark renders as a letterbox crop. */
.auth-card__logo img { display: none !important; }
.auth-card__logo {
  display: flex !important;
  justify-content: center;
  align-items: baseline;
  padding: 8px 0 2px;
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  overflow: visible !important;
}
.auth-card__logo::before,
.auth-card__logo::after {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
}
.auth-card__logo::before { content: "FATTER"; color: #f5e6c8; }
.auth-card__logo::after  { content: "FLIX";   color: #c41e1e; border-bottom: 3px solid #c41e1e; }

/* Links on the auth pages carry RomM's literal purple, not a theme var. */
.auth-card a, .r-v2-auth a { color: #e05555 !important; }

/* ---- device-approve page (.r-v2-devpair*) -- the page a friend sees during pairing ---- */
#app > div { background: #0a0a0a !important; }
.r-v2-devpair-shell { background: #0a0a0a !important; }
.r-v2-devpair-shell__bg {
  background-color: #0a0a0a !important;
  background-image:
    radial-gradient(60% 80% at 15% 20%, rgba(196, 30, 30, 0.26), transparent 60%),
    radial-gradient(50% 70% at 85% 85%, rgba(138, 21, 21, 0.32), transparent 65%) !important;
}

/* RomM paints colored chips/buttons with literal purple, not theme vars. */
.r-chip--has-color { background: #8a1515 !important; }
.r-chip__content { color: #f5e6c8 !important; }
.r-btn--has-color { background: #c41e1e !important; color: #fff !important; }
.r-v2-devpair__icon-wrap { background: rgba(196, 30, 30, 0.15) !important; }
.r-v2-devpair__icon-wrap svg, .r-v2-devpair__icon-wrap i {
  color: #ff3333 !important;
  fill: #ff3333 !important;
}

/* The approve copy names RomM; swap the sentence without touching the app.
   font-size:0 empties the paragraph visually, the pseudo-element restates it.
   SCOPED TO THE REQUEST HEADER: the success/denied card reuses .r-v2-devpair__body
   (inside .r-v2-devpair__state) for "You can close this tab..." -- which is correct,
   RomM-free copy that must show through. An unscoped swap put the asking sentence
   under "Device authorized"; seen live 2026-08-31. */
.r-v2-devpair__header .r-v2-devpair__body { font-size: 0 !important; }
.r-v2-devpair__header .r-v2-devpair__body::after {
  content: "A device is asking to join your Fatterflix account.";
  font-size: 15px;
  color: #b4a58c;
}

/* ---- approve page, stripped to the decision (Ryan 2026-08-31: "bam, approved") ----
   Hidden: the raw request GUID and the "Token expires in" dropdown (its default,
   Never, is what every pairing uses anyway). The 9 scope chips are hidden too, but
   NOT silently: the "This device is requesting:" label is rewritten into one plain
   sentence that states the whole grant, because the chip grid was the only thing
   telling someone what they were approving. The chips are Vue state (role=checkbox,
   all pre-checked); display:none changes nothing about what Approve submits.
   The language dropdown is outside .r-v2-devpair__form, so it survives. */
.r-v2-devpair__identifier { display: none !important; }
.r-v2-devpair__form > .r-select { display: none !important; }
.r-v2-devpair__scope-grid { display: none !important; }
.r-v2-devpair__label { font-size: 0 !important; }
.r-v2-devpair__label::after {
  content: "Approving lets it browse your game library, download games, and back up your saves. Nothing else.";
  font-size: 14px;
  line-height: 1.5;
  color: #b4a58c;
}

/* First-paint splash before the app mounts: white flash + RomM mark -> black. */
#app-loading-logo { background: #0a0a0a !important; }
#app-loading-logo img { display: none !important; }