/* ==========================================================================
   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. */
.r-v2-devpair__body { font-size: 0 !important; }
.r-v2-devpair__body::after {
  content: "A device is asking to join your Fatterflix account.";
  font-size: 15px;
  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; }