/* The account console (keycloak.v3, PatternFly 5) in the login page's look.
   Recolours PatternFly's own variables rather than its components, so markup
   changes in a Keycloak upgrade cannot break it. */
:root {
  --mx: #00ff41;
  --mx-dim: #0a3d1a;
  --mx-font: "Courier New", ui-monospace, monospace;

  --pf-v5-global--FontFamily--text: var(--mx-font);
  --pf-v5-global--FontFamily--heading: var(--mx-font);
  --pf-v5-global--FontFamily--monospace: var(--mx-font);

  --pf-v5-global--Color--100: var(--mx);
  --pf-v5-global--Color--200: #00c832;
  --pf-v5-global--Color--dark-100: var(--mx);
  --pf-v5-global--Color--dark-200: #00c832;
  --pf-v5-global--Color--light-100: var(--mx);
  --pf-v5-global--Color--light-200: #00c832;
  --pf-v5-global--link--Color: var(--mx);
  --pf-v5-global--link--Color--hover: #26ff5c;
  --pf-v5-global--link--Color--light: var(--mx);
  --pf-v5-global--link--Color--light--hover: #26ff5c;

  --pf-v5-global--primary-color--100: var(--mx);
  --pf-v5-global--primary-color--200: #26ff5c;
  --pf-v5-global--primary-color--light-100: var(--mx);
  --pf-v5-global--primary-color--dark-100: var(--mx);
  --pf-v5-global--active-color--100: var(--mx);
  --pf-v5-global--active-color--300: var(--mx);
  --pf-v5-global--primary-color--text: #000;

  --pf-v5-global--BackgroundColor--100: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--200: transparent;
  --pf-v5-global--BackgroundColor--300: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--400: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--light-100: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--light-200: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--light-300: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--dark-100: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--dark-200: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--dark-300: rgba(0, 0, 0, 0.9);
  --pf-v5-global--BackgroundColor--dark-400: rgba(0, 0, 0, 0.9);

  --pf-v5-global--BorderColor--100: var(--mx-dim);
  --pf-v5-global--BorderColor--200: var(--mx-dim);
  --pf-v5-global--BorderColor--300: var(--mx-dim);
  --pf-v5-global--BorderColor--dark-100: var(--mx-dim);
}
/* The light palette leaves body text to the browser's default black. */
html, body { background: #000 !important; color: var(--mx); }

/* The rain (matrix.js) sits behind the app. */
#matrix-rain {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; opacity: 0.55;
}
#app { position: relative; z-index: 1; }
.pf-v5-c-page { background: transparent !important; }

.pf-v5-c-masthead, .pf-v5-c-page__sidebar {
  border-color: var(--mx) !important;
}
.pf-v5-c-masthead { border-bottom: 1px solid var(--mx); }
.pf-v5-c-page__sidebar { border-right: 1px solid var(--mx); }

/* Two blues that PatternFly sets as literals, not via the globals above. */
.pf-v5-c-nav__link { --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mx); }
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--mx);
  --pf-v5-c-button--m-link--hover--Color: #26ff5c;
}

.pf-v5-c-card {
  border: 1px solid var(--mx);
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.3);
}
.pf-v5-c-title { text-shadow: 0 0 8px rgba(0, 255, 65, 0.6); }

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: #000;
  --pf-v5-c-button--m-primary--hover--Color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pf-v5-c-button.pf-m-primary:hover { box-shadow: 0 0 14px var(--mx); }

input, select, textarea { background: #000 !important; color: var(--mx) !important; }

/* Open menus sit over the page; keep them opaque. */
.pf-v5-c-menu { background: #000; border: 1px solid var(--mx-dim); }
:focus-visible { outline-color: var(--mx) !important; }

/* No avatar: without a picture it is only a grey placeholder. */
.pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-overflow-menu { display: none; }
/* Its spacing went with it: the user menu is the last item now. */
.pf-v5-c-masthead .pf-v5-c-toolbar__item { margin-right: 0; }

/* Phones: one row -- burger (on the side the navigation opens from), logo,
   user menu at the right edge -- instead of the user menu wrapped onto a
   second row. 768px is PatternFly's md breakpoint, where the masthead stops
   wrapping by itself. */
@media (max-width: 767px) {
  /* No right padding: the menu button's own padding keeps the dots off the
     edge and the tap target whole. */
  .pf-v5-c-masthead { display: flex; flex-wrap: nowrap; align-items: center; padding-right: 0; }
  .pf-v5-c-masthead__brand { flex: 1 1 auto; min-width: 0; }
  .pf-v5-c-masthead__content { flex: 0 0 auto; }
  /* The navigation opens over the page here; see-through, the two collide. */
  .pf-v5-c-page__sidebar { background: #000 !important; }
}

/* "Signing in": the passkey first, then the codes for when it is missing.
   Keycloak orders the sections by category, which puts the codes (a "second
   factor" to it) above the passkey. */
.pf-v5-c-page__main-section:has(> .pf-v5-c-page__main-section > #passwordless-categ-title) {
  display: flex;
  flex-direction: column;
}
.pf-v5-c-page__main-section:has(> #passwordless-categ-title) { order: -1; }