*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:#f7f8fc;color:#1f2937}
#app{max-width:1400px;margin:0 auto;padding:16px}
#layout{display:flex;gap:16px}
#sidebar{width:380px;display:flex;flex-direction:column;gap:14px}
.control-group{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.control-group h2{font-size:16px;margin-bottom:6px}
.control-group label{display:flex;flex-direction:column;font-size:13px;margin-bottom:8px;gap:4px}
.control-group input, .control-group button, .control-group select{padding:8px;border-radius:10px}
.control-group input{border:1px solid #d1d5db}
.control-group button{border:none;background:#2563eb;color:#fff;cursor:pointer}
/* Building tabs styling */
#building-tabs button{
  background:#f3f4f6;
  color:#374151;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  white-space:nowrap;
}
#building-tabs button.active{
  background:#2563eb;
  color:#fff;
}
/* Add building button separate styling */
#add-building{
  margin-top:8px;
  padding:6px 10px;
  border-radius:8px;
  background:#10b981;
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:13px;
}
.control-group button.secondary{background:#6b7280}
.control-group button:disabled{opacity:.5;cursor:not-allowed}
.control-group .button-row{display:flex;gap:8px;flex-wrap:wrap}

/* Grid scale select styling (inherits from other inputs) */
#grid-scale{padding:8px;border-radius:10px;border:1px solid #d1d5db;min-width:60px}

/* Coordinate display overlay shown while dragging */
#coord-display{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.75);
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  pointer-events:none;
  display:none;
  z-index:9999;
}

/* Delete button for obstacles */
.delete-obstacle{
  position:absolute;
  top:2px;
  left:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  color:#fff;
  line-height:22px;
  text-align:center;
  font-size:16px;
  cursor:pointer;
  opacity:0.7;
  transition:opacity .15s;
}
.obstacle:hover .delete-obstacle{opacity:1;}
#import-log{background:#0b1220;color:#c6d0e9;border-radius:8px;padding:8px;height:110px;overflow:auto;font-size:12px;margin-top:6px}
.mapper{border:1px dashed #e5e7eb;border-radius:10px;padding:10px;margin-top:8px;background:#fafafa}
.mapper.hidden{display:none}
.mapper h3{font-size:14px;margin-bottom:8px}
.mapper .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#mapper-note{display:block;color:#6b7280;margin-top:6px;font-size:12px}

#facility-wrapper{flex:1;min-height:70vh;position:relative}
#facility-container{position:relative;height:100%;min-height:70vh;border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:visible;padding:8px}
#facility{position:relative;width:100%;height:100%;border:1px dashed #e5e7eb;background-image:linear-gradient(0deg,transparent 24%,rgba(221,226,236,.35) 25%,rgba(221,226,236,.35) 26%,transparent 27%,transparent 74%,rgba(221,226,236,.35) 75%,rgba(221,226,236,.35) 76%,transparent 77%),linear-gradient(90deg,transparent 24%,rgba(221,226,236,.35) 25%,rgba(221,226,236,.35) 26%,transparent 27%,transparent 74%,rgba(221,226,236,.35) 75%,rgba(221,226,236,.35) 76%,transparent 77%);background-size:40px 40px}
.boat{position:absolute;border-radius:6px;color:#0f172a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;text-align:center;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.boat-name{font-weight:600;font-size:12px}
.boat-owner{font-size:11px;opacity:.9}
.boat-size{font-size:11px}
.delete-boat{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;line-height:16px;text-align:center;font-size:12px;opacity:0;transition:opacity .15s}
.boat:hover .delete-boat{opacity:1}
.lock-btn{
  position:absolute;
  top:2px;
  right:2px;
  /* Increase size for easier clicking */
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  color:#fff;
  line-height:22px;
  text-align:center;
  font-size:16px;
  /* Always visible so it's easy to find */
  opacity:0.7;
  transition:opacity .15s;
  cursor:pointer;
  pointer-events:auto;
}
/* When hovering over the boat make lock fully opaque */
.boat:hover .lock-btn{
  opacity:1;
}
.boat.locked{border:2px dashed #64748b !important;box-shadow:none !important;cursor:default !important;opacity:.95}

.obstacle{position:absolute;border:2px dotted rgba(0,0,0,.25);border-radius:6px;background:#f3f4f6;color:#111827;display:flex;align-items:center;justify-content:center;font-size:12px;padding:4px;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.08)}

#x-axis-labels,#y-axis-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;font-size:11px;color:#6b7280;z-index:5}
#x-axis-labels div{position:absolute;bottom:-14px;transform:translateX(-50%)}
#y-axis-labels div{position:absolute;left:-18px;transform:translateY(50%)}

#legend{position:absolute;right:12px;top:12px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px;display:flex;gap:12px;align-items:center;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-dot.top{background:#2563eb}
.legend-dot.bottom{background:#ef4444}

#expected-list table{width:100%;border-collapse:collapse}
#expected-list th,#expected-list td{font-size:12px;border-bottom:1px solid #e5e7eb;padding:6px 4px;text-align:left}
#expected-list th{background:#f8fafc;font-weight:600}
.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #cbd5e1;margin-right:4px}