/* ------------------------------------------------------------------ */
/* Site                                                                */
/* ------------------------------------------------------------------ */

html {
  font-size: 14px;
}

@media (min-width: 768px) {

  html {
    font-size: 16px;
  }
}

body {
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  background-color: #323232;
  background-image: url('../img/GreyBG.png');
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* Shown by Blazor when the page hits an unhandled error */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  background: lightyellow;
  color: #000;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  z-index: 2000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* On-screen joystick (nipplejs)                                       */
/* ------------------------------------------------------------------ */

.nipple .back::after {
  content: "";
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url('../img/JoyStickBack.png');
}

.nipple .front::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30px 30px, #f0E0E0, #550000);
  left: 0;
  top: 0;
}

/* ------------------------------------------------------------------ */
/* Remote control page layouts                                         */
/*                                                                     */
/* Both layouts render the same component tree. Only class names       */
/* change, so the video player, joystick and self view never remount   */
/* (remounting would drop the stream sockets and the nipplejs binding) */
/* ------------------------------------------------------------------ */

/* The page covers the window (fixed, outside the layout container) so  */
/* it never needs a page scrollbar. A side column that holds more       */
/* controls than fit scrolls on its own instead                         */
.rc-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f8f9fa;
}

/* Top bar: task, layout toggle, All done and Report */
.rc-topbar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(33, 37, 41, .92);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Long tasks clamp to two lines, the full text is in the tooltip */
.rc-task {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.rc-topbar-buttons {
  flex: 0 0 auto;
  display: flex;
}

.rc-topbar-buttons .btn {
  margin-left: 6px;
}

/* Report form drops down under the top bar */
.rc-report {
  position: absolute;
  top: 100%;
  right: 12px;
  width: 440px;
  max-width: calc(100% - 24px);
  margin-top: 6px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(33, 37, 41, .97);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
}

/* Stage: joystick column, video, button column, speech bar under the video */
.rc-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "left video right"
    "left speak right";
  gap: 12px;
  padding: 12px;
}

.rc-video {
  grid-area: video;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #000;
}

/* The player fills its area whatever the frame size, letterboxed instead of stretched */
.rc-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.rc-media #video-canvas,
.rc-media #video-player {
  height: 100%;
  object-fit: contain;
}

.rc-left,
.rc-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.rc-left {
  grid-area: left;
  align-items: center;
}

.rc-right {
  grid-area: right;
  width: 240px;
}

.rc-speak {
  grid-area: speak;
  position: relative;
  z-index: 1;
}

.rc-servos {
  margin-top: 8px;
}

/* Self view (telepresence local camera) */
.rc-selfview {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 170px;
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.rc-selfview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Classic layout: a game controller, joystick grip on the left,       */
/* the video as the screen in the middle, buttons grip on the right    */
/* ------------------------------------------------------------------ */

.rc-classic .rc-video {
  border: 3px solid #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
}

.rc-classic .rc-left,
.rc-classic .rc-right {
  padding: 12px;
  border-radius: 28px;
  background: linear-gradient(#41464b, #212529);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Center the grip contents vertically. Spacers (not justify-content) keep the top
   reachable when the column overflows and scrolls, they shrink to nothing then */
.rc-classic .rc-left::before,
.rc-classic .rc-left::after,
.rc-classic .rc-right::before,
.rc-classic .rc-right::after {
  content: "";
  flex: 1 0 0;
}

/* ------------------------------------------------------------------ */
/* Full screen layout: the video covers the window behind everything,  */
/* the controls float over it in the corners                           */
/* ------------------------------------------------------------------ */

.rc-wide .rc-topbar {
  background: rgba(0, 0, 0, .45);
  box-shadow: none;
}

/* Fixed, so it also sits behind the top bar */
.rc-wide .rc-video {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.rc-wide .rc-stage {
  grid-template-areas:
    "left . right"
    "left speak right";
}

/* Spacer pushes the joystick, buttons and servos to the bottom corners. It shrinks to
   nothing when a column overflows, so the top stays reachable */
.rc-wide .rc-left::before,
.rc-wide .rc-right::before {
  content: "";
  flex: 1 0 0;
}

/* Self view moves above the spacer, to the top left corner */
.rc-wide .rc-selfview {
  order: -1;
  margin-top: 0;
  margin-bottom: 12px;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .5);
}

.rc-wide .rc-scripts,
.rc-wide .rc-servos,
.rc-wide .rc-speak {
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .4);
}

.rc-wide .rc-scripts .btn {
  opacity: .9;
}

.rc-wide .rc-speak {
  justify-self: center;
  width: 100%;
  max-width: 640px;
}

/* ------------------------------------------------------------------ */
/* Short windows (phones held sideways): the joystick takes the whole  */
/* left column, so the self view floats over the top left of the video */
/* and the servo pads shrink                                           */
/* ------------------------------------------------------------------ */

@media (max-height: 500px) and (orientation: landscape) {

  .rc-stage {
    gap: 8px;
    padding: 8px;
  }

  /* Static, so the stage (not the scrolling column) positions the self view */
  .rc-left {
    position: static;
  }

  /* Keeps the joystick over the full screen video now the column is static */
  .rc-joystick {
    position: relative;
    z-index: 1;
  }

  /* Joystick column is 200px + 2 x 12px grip padding, then the 8px stage padding and gap */
  .rc-selfview,
  .rc-wide .rc-selfview {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 248px;
    width: 120px;
    height: 90px;
    margin: 0;
    border: 2px solid rgba(255, 255, 255, .5);
  }

  /* Full screen has no grip padding around the joystick */
  .rc-wide .rc-selfview {
    top: 8px;
    left: 216px;
  }

  /* .rc-page outranks the servo rules further down this file */
  .rc-page .rc-servo-v .rc-servo-pad {
    height: 110px;
  }

  .rc-page .rc-servo-xy .rc-servo-pad {
    width: 110px;
    height: 110px;
  }
}

/* ------------------------------------------------------------------ */
/* Phones held upright: video on top, joystick and buttons underneath  */
/* ------------------------------------------------------------------ */

@media (max-width: 767.98px) and (orientation: portrait) {

  /* Task on its own line, buttons under it */
  .rc-topbar {
    flex-wrap: wrap;
    padding: 4px 8px;
    font-size: .9rem;
  }

  .rc-task {
    flex: 1 1 100%;
    margin: 0 0 4px 0;
  }

  .rc-topbar-buttons {
    margin-left: auto;
  }

  .rc-topbar-buttons .btn:first-child {
    margin-left: 0;
  }

  .rc-stage {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "video video"
      "speak speak"
      "left right";
    gap: 8px;
    padding: 8px;
  }

  .rc-wide .rc-stage {
    grid-template-areas:
      ". ."
      "speak speak"
      "left right";
  }

  /* The video keeps at least the top part of the screen */
  .rc-left,
  .rc-right {
    max-height: 50vh;
  }

  .rc-right {
    width: auto;
  }

  .rc-classic .rc-left,
  .rc-classic .rc-right {
    padding: 6px;
    border-radius: 18px;
  }

  .rc-selfview {
    width: 120px;
    height: 100px;
  }

  /* Full screen video hugs the top so the controls below cover the letterbox, not the picture */
  .rc-wide .rc-media #video-canvas,
  .rc-wide .rc-media #video-player {
    object-position: top;
  }
}

/* ------------------------------------------------------------------ */
/* Servos the robot lets the operator move                             */
/* ------------------------------------------------------------------ */

.rc-servo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.rc-servo {
  margin: 8px;
  text-align: center;
}

.rc-servo-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* text-muted is too dark over the controller and the video */
.rc-servo-desc {
  max-width: 200px;
  margin: 4px auto 0 auto;
  color: rgba(255, 255, 255, .65) !important;
}

/* touch-action none stops a drag on a phone from scrolling the page */
.rc-servo-pad {
  position: relative;
  margin: 0 auto;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.rc-servo-dragging {
  cursor: grabbing;
}

/* Pads shrink with a narrow button column. The pointer maths in js/control.js uses the
   rendered size, so any size works */
.rc-servo-h .rc-servo-pad {
  width: 200px;
  max-width: 100%;
  height: 36px;
}

.rc-servo-v .rc-servo-pad {
  width: 36px;
  height: 160px;
}

.rc-servo-xy .rc-servo-pad {
  width: 160px;
  max-width: 100%;
  height: 160px;
}

.rc-servo-knob {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1b6ec2;
  pointer-events: none;
}