/* =====================================================================
   Phosphor — account & admin consoles on a green CRT.
   Loaded after modern-base's console.css: overrides its --t-* tokens and
   adds glow, scanlines and terminal details. Kept deliberately subtler
   than the login page — this is where people actually work.
   Swap --crt for #ffb000 (amber) or #8be9fd (ice) to change the tube.
   ===================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  /* served by the login type of this theme: /resources/<v>/login/phosphor/fonts/… */
  src: url("../../../login/phosphor/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

html:root,
html.pf-v5-theme-dark:root {
  color-scheme: dark;

  --crt: #3dff7a;
  --crt-dim: color-mix(in srgb, var(--crt) 68%, #000);
  --crt-faint: color-mix(in srgb, var(--crt) 22%, transparent);
  --crt-glow: 0 0 2px color-mix(in srgb, var(--crt) 55%, transparent);

  --t-font: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-heading-tracking: 0.01em;

  --t-page-bg: #030703;
  --t-page-backdrop: radial-gradient(ellipse 120% 90% at 50% 40%, #0a1d0c 0%, transparent 70%);
  --t-surface: #041006;
  --t-surface-2: #08190b;
  --t-chrome-bg: #020602;
  --t-masthead-bg: #020602;
  --t-masthead-border: var(--crt-faint);
  --t-border: var(--crt-faint);
  --t-border-strong: color-mix(in srgb, var(--crt) 38%, transparent);

  --t-fg: var(--crt);
  --t-fg-muted: var(--crt-dim);
  --t-fg-disabled: color-mix(in srgb, var(--crt) 40%, #000);

  --t-accent: var(--crt);
  --t-accent-hover: color-mix(in srgb, var(--crt) 70%, #fff);
  --t-accent-fg: #021003;
  --t-accent-soft: color-mix(in srgb, var(--crt) 12%, transparent);

  --t-input-bg: color-mix(in srgb, var(--crt) 3%, transparent);
  --t-input-border: var(--crt-faint);
  --t-input-border-hover: var(--crt-dim);
  --t-focus-ring: 0 0 12px -2px color-mix(in srgb, var(--crt) 55%, transparent);

  --t-radius: 0;
  --t-radius-lg: 0;
  --t-card-shadow: none;

  /* PatternFly's "text on dark" colors (masthead icons, tooltips, badges) */
  --pf-v5-global--Color--light-100: var(--crt);
  --pf-v5-global--Color--light-200: var(--crt-dim);
  --pf-v5-global--danger-color--100: #ff5f56;
  --pf-v5-global--warning-color--100: #ffb000;
  --pf-v5-global--success-color--100: var(--crt);
  --pf-v5-global--info-color--100: #8be9fd;
}

::selection { background: var(--crt); color: #021003; text-shadow: none; }

/* ---------- glow + scanlines ---------- */
html body { text-shadow: var(--crt-glow); }

html body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.16) 3px);
}

/* ---------- terminal details ---------- */
/* page titles: h1.pf-v5-c-title in the account console, a bare h1 in .pf-v5-c-content in the admin console */
html .pf-v5-c-page__main-section :is(h1.pf-v5-c-title, .pf-v5-c-content > h1)::before { content: "$ "; color: var(--crt-dim); }

html .pf-v5-c-nav__link { text-transform: lowercase; }
html .pf-v5-c-nav__link.pf-m-current { box-shadow: inset 2px 0 0 var(--crt); }

html .pf-v5-c-button:is(.pf-m-primary, .pf-m-secondary) {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
html .pf-v5-c-button.pf-m-primary { text-shadow: none; }
html .pf-v5-c-button.pf-m-primary:is(:hover, :focus-visible) { box-shadow: 0 0 20px -4px var(--crt); }

html a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-tabs__link) {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

html .pf-v5-c-form-control > :is(input, textarea) { caret-color: var(--crt); }

html .pf-v5-c-switch {
  --pf-v5-c-switch__toggle--BackgroundColor: var(--crt-faint);
  --pf-v5-c-switch__toggle--before--BackgroundColor: var(--crt-dim);
  --pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: #021003;
}

html .pf-v5-c-label {
  --pf-v5-c-label--BorderRadius: 0;
}

/* tint images that would otherwise be the only non-green thing on screen */
html :is(.pf-v5-c-avatar, .pf-v5-c-masthead img[alt*="vatar"]) {
  filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(4) brightness(0.9);
}

html .pf-v5-c-backdrop { --pf-v5-c-backdrop--BackgroundColor: rgb(0 4 0 / 0.8); }

@media (prefers-reduced-motion: no-preference) {
  html .pf-v5-c-masthead__brand img { animation: phosphor-flicker 7s steps(1) infinite; }
}
@keyframes phosphor-flicker { 0%, 100% { opacity: 1; } 61% { opacity: 0.85; } 62% { opacity: 1; } }