#map-container {
  width: 50%;          /* 👈 map gets smaller */
  height: 280px;       /* 👈 map height reduced */
  margin: 20px auto;
  background: white;
  border-radius: 12px;
  position: relative;
}

#building-svg {
  width: 100%;
  height: 100%;
}


#floor-1 {
  width: 100%;
  height: 100%;
}

.hallway {
  fill: #bbacacee;
}

.room {
  fill: #d97706;
  stroke: #a4654f;
  stroke-width: 1;
}

.restroom {
  fill: #111827;
}

.stairs {
  fill: #9ca3af;
}

.label {
  fill: white;
  font-size: 14px;
  text-anchor: middle;
  pointer-events: none;
}

.building-frame {
  fill: rgb(212, 204, 204);            /* transparent inside */
  stroke:none;       /* dark gray outline */
  stroke-width: 1;       /* thicker than room borders */
}

.rotate {
  transform: rotate(-90deg);
 transform-origin: 50% 50%;
}

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: white;
}

.controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
}

.highlight {
  stroke: #ff0000;       /* red outline */
  stroke-width: 5;       /* thicker border */
  fill: rgb(189, 189, 132);          /* optional fill change */
  opacity: 0.8;
}

.door {
  fill: #eeeeee;     /* match hallway color */
  stroke: #000;
  stroke-width: 2;   /* clear but thinner than walls */
}

.wall {
  fill: #eeeeee;     /* match hallway color */
  stroke: #000;
  stroke-width: 2;   /* clear but thinner than walls */
}


.nav-path {
  fill: none;
  stroke: #e32;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 6;
}

.nav-node {
  fill:none;
  stroke: #fff;
  stroke-width: 0;
  opacity: 0.8;
}
 
.floor {
  display: none;
}

.floor.active {
  display: block;
}

.nav-ui {
  background: lightslategray;
  border-radius: 12px;
  padding: 20px;
  max-width: 900px;
  max-height: 1000px;
  margin: 20px auto;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

.nav-header h2 {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.location-label {
  font-size: 0.9em;
  color: #666;
  margin-top: 4px;
}

.nav-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.nav-controls input,
.nav-controls select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1em;
}

.nav-controls button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: #4a90e2;
  color: white;
  font-size: 1em;
  cursor: pointer;
}

.nav-controls button:hover {
  background-color: #357bd8;
}

.start-end-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}