/*
 * RC NODE branding for a stock Pterodactyl install.
 *
 * Written from scratch against Pterodactyl's own markup rather than adapted
 * from a paid theme, so it carries no third-party licence and survives a panel
 * upgrade: it only re-colours, it does not replace components.
 *
 * Install:
 *   1. Copy this file to  /var/www/pterodactyl/public/themes/rcnode.css
 *   2. Add to  resources/views/templates/wrapper.blade.php  inside <head>:
 *        <link rel="stylesheet" href="/themes/rcnode.css">
 *   3. php artisan view:clear
 *
 * Re-apply steps 2 and 3 after upgrading Pterodactyl, since the upgrade
 * replaces that Blade template.
 */

:root {
  --rc-cyan: #00a6fb;
  --rc-cyan-hover: #38bdf8;
  --rc-blue: #0071e3;
  --rc-base: #05070d;
  --rc-raised: #0b0f1a;
  --rc-card: #111726;
  --rc-border: #1f2941;
}

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

body,
#app {
  background-color: var(--rc-base) !important;
}

/* Pterodactyl builds most panels from these two Tailwind greys. */
.bg-neutral-900,
.bg-neutral-800 {
  background-color: var(--rc-card) !important;
}

.bg-neutral-700 {
  background-color: var(--rc-raised) !important;
}

.border-neutral-800,
.border-neutral-700,
.border-neutral-600 {
  border-color: var(--rc-border) !important;
}

/* ---------------------------------------------------------------- */
/* Brand colour                                                      */
/* ---------------------------------------------------------------- */

/* Primary buttons, the active server tab, progress and focus rings. */
.bg-primary-500,
.bg-primary-600,
.hover\:bg-primary-600:hover {
  background: linear-gradient(135deg, var(--rc-cyan) 0%, var(--rc-blue) 100%) !important;
  border-color: transparent !important;
}

.text-primary-400,
.text-primary-500 {
  color: var(--rc-cyan) !important;
}

.border-primary-500,
.focus\:border-primary-400:focus {
  border-color: var(--rc-cyan) !important;
}

a:hover {
  color: var(--rc-cyan-hover);
}

/* ---------------------------------------------------------------- */
/* Console                                                           */
/* ---------------------------------------------------------------- */

/* Give the terminal the same near-black as the storefront, so switching
   between the two sites does not feel like two products. */
.xterm-viewport,
.xterm-screen {
  background-color: var(--rc-base) !important;
}

/* ---------------------------------------------------------------- */
/* Login                                                             */
/* ---------------------------------------------------------------- */

#app > div:first-child {
  background-image: radial-gradient(
    ellipse 60% 50% at 50% 0%,
    rgba(0, 166, 251, 0.12),
    transparent 70%
  );
}