/* MOVEMENT – same size, directly below Cybernetics */
.movement-area {
  position: absolute;
  top: 514px;
  left: 127px;
  width: 193px;
  height: 53px;  
  pointer-events: auto;
  background: transparent;
  outline: 2px solid rgba(0, 153, 255, 1);
}

.movement-list {
  position: relative;
  width: 193px;
  height: 52px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* "+" button */
.movement-add {
  position: absolute;
  top: 1px;
  left: 85px;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 8px;
  border: transparent;
  background: transparent;
  color: #0ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 10px;
  cursor: pointer;
  z-index: 600;
}

.movement-add:hover {
  background: rgba(0, 255, 255, 0.25);
  box-shadow: 0 0 8px #0ff;
}

/* --- Buttons on right side of row --- */
.movement-buttons {
  position: absolute;
  top: -1px;   /* aligned just above the row */
  left: 192px;
  height: 16px;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
  z-index: 700; /* keep it clickable above the sheet art */
}

.movement-buttons button {
  width: auto;
  height: 16px;
  margin: 0 2px;
  padding: 0 4px;
  border: 1px solid #0ff;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.9);
  color: #0ff;
  font-size: 7px;
  white-space: nowrap;
  cursor: pointer;
}

.movement-buttons button:hover {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 6px #0ff;
}

/* Each Movement row */
.movement-row {
  position: relative;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  color: #0ff;
  padding: 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(28, 130, 214, 0.0);
  background: transparent;
}

/* Column visuals re-used so they stay aligned to printed grid */
.movement-type,
.movement-base,
.movement-bonus,
.movement-total {
  border: 1px solid rgb(76, 151, 221);
  background: transparent;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
}

/* Inline edit inputs for movement rows (all columns) */
.movement-edit-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  font-size: 9px;
  padding: 0 2px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;   /* center text for numeric columns and dropdown */
}

/* Positions identical to Cyber so it sits on the printed grid */
.movement-type {
  position: absolute;
  left: -1px;
  top: 0px;
  width: 47px;
  height: 16px;
}

.movement-base {
  position: absolute;
  left: 48px;
  top: 0px;
  width: 47px;
  height: 16px;
  text-align: center;
}

.movement-bonus {
  position: absolute;
  left: 95px;
  top: 0px;
  width: 47px;
  height: 16px;
  text-align: center;
}

.movement-total {
  position: absolute;
  left: 144px;
  top: 0px;
  width: 47px;
  height: 16px;
  font-size: 10px;
  text-align: center;
}

/* --- Hover tooltip for Cybernetics + Movement --- */
/* --- Hover tooltip for Movement --- */
.movement-tooltip {
  position: absolute;
  top: 16px;       /* will be overridden dynamically in JS */
  left: 194px;

  /* shrink-to-fit width, but keep your existing cap */
  display: inline-block;
  width: auto;
  max-width: 180px;
  padding: 6px;

  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* scroll when content is tall, like Actions/Reactions/Held/General */
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;

  font-size: 14px;
  line-height: 1.1;
  color: #0ff;

  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #0ff;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.7);

  /* hidden tooltips should NOT block mouse input */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s linear;
  z-index: 650;
}

.movement-tooltip.visible {
  opacity: 1;
  /* only catch mouse when visible (for scrolling + hover detection) */
  pointer-events: auto;
}

.movement-tooltip-line {
  white-space: nowrap;
}

.movement-hover-buffer {
  position: absolute;
  width: 100%;      /* JS overrides left/width to match the button bar */
  height: 18px;     /* same “magic number” bridge as the other boxes */
  background: transparent;
  pointer-events: auto;
  z-index: 645;     /* between buttons (700) and tooltip (650) */
}



/* ============================
   Movement Type dropdown styling
   Matches Class dropdown behavior
   ============================ */

/* The select element used for Movement Type */
.movement-type-select {
  background: transparent;   /* like the Class dropdown when closed */
  color: white;
  border: 1px solid #00eaff;
  font-size: 10px;
  height: 16px;
  padding-left: 2px;
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* On hover, give it a little cyan glow */
.movement-type-select:hover {
  border-color: #00ffff;
  box-shadow: 0 0 4px #00ffff;
}

/* When the dropdown is open (option list items) */
.movement-type-select option {
  background: black;   /* black menu background */
  color: white;        /* white menu text */
}

/* Remove default highlight background of the selected option */
.movement-type-select option:checked {
  background: black !important;
  color: white !important;
}

/* Also remove highlight from hovered option */
.movement-type-select option:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}