styles.css

/* Base overlay styles - SOLID border */
.multi-measure-overlay {
  position: absolute;
  /* border: 1px solid #0075ff; */ /* Solid blue - Original */
  border: 1px dotted #f25252; /* Dotted Red - Changed */
  background-color: rgba(242, 82, 82, 0.05); /* Light red background */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999995;
}

/* Hover effect overlay - Dashed */
.multi-measure-hover {
  position: absolute;
  border: 1px dashed #0075ff; /* Dashed blue */
  background-color: rgba(0, 117, 255, 0.05);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999994;
}

/* Content area overlay */
.multi-measure-content {
  position: absolute;
  border: 1px solid #3498db;
  background-color: rgba(52, 152, 219, 0.05);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999993;
}

/* Margin overlay - orange */
.multi-measure-margin {
  position: absolute;
  background-color: rgba(255, 165, 0, 0.3); /* Orange tint */
  border: 1px dashed rgba(255, 165, 0, 0.6); /* Slightly less opaque border */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999992;
}

/* Padding overlay - green */
.multi-measure-padding {
  position: absolute;
  background-color: rgba(46, 204, 113, 0.3); /* Green tint */
  border: 1px dashed rgba(46, 204, 113, 0.6); /* Slightly less opaque border */
  box-sizing: border-box;
  pointer-events: none;
  z-index: 999991;
}

/* Guide lines - REMOVED */
/*
.multi-measure-guideline {
  position: absolute;
  pointer-events: none;
  z-index: 999990;
}

.multi-measure-guideline-horizontal {
  height: 1px;
  background-color: rgba(231, 76, 60, 0.7);
  box-shadow: 0 0 1px rgba(231, 76, 60, 0.9);
}

.multi-measure-guideline-vertical {
  width: 1px;
  background-color: rgba(231, 76, 60, 0.7);
  box-shadow: 0 0 1px rgba(231, 76, 60, 0.9);
}
*/

/* Basic label styles for all types */
.multi-measure-label,
.multi-measure-hover-label,
.multi-measure-margin-label,
.multi-measure-padding-label,
.multi-measure-dimension-box,
.multi-measure-distance-label, /* Keep this selector for now if needed elsewhere, or remove if truly unused */
.multi-measure-hover-distance-label {
  /* Added hover distance label */
  position: absolute;
  color: white;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999999;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dimension box styling (main WxH box) */
.multi-measure-dimension-box {
  background-color: #f25252;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* NEW: Styles for distance labels ON the guide lines - REMOVED */
/*
.multi-measure-distance-label {
  background-color: #f25252;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
*/

.multi-measure-hover-label {
  top: -24px;
  left: 0;
  background: #0075ff;
}

.multi-measure-margin-label {
  background: rgb(255, 165, 0);
  color: white; /* Ensure text is white */
  padding: 1px 3px; /* Add padding */
}

.multi-measure-padding-label {
  background: rgb(46, 204, 113);
  color: white; /* Ensure text is white */
  padding: 1px 3px; /* Add padding */
}

/* NEW: Hover distance lines - DOTTED */
.multi-measure-hover-distance-line {
  position: absolute;
  background-color: transparent; /* No background */
  /* border-top: 1px dotted #f25252; */ /* Dotted Red - Previous */
  /* border-left: 1px dotted #f25252; */
  border-top: 1px solid #f25252; /* Solid Red - Changed */
  border-left: 1px solid #f25252; /* Solid Red - Changed */
  pointer-events: none;
  z-index: 999989; /* Below guides */
}
/* Adjust width/height for vertical/horizontal lines */
.multi-measure-hover-distance-line[style*="width: 1px"] {
  /* Vertical */
  border-top: none;
  /* border-left: 1px dotted #f25252; */ /* Dotted Red - Previous */
  border-left: 1px solid #f25252; /* Solid Red - Changed */
}
.multi-measure-hover-distance-line[style*="height: 1px"] {
  /* Horizontal */
  border-left: none;
  /* border-top: 1px dotted #f25252; */ /* Dotted Red - Previous */
  border-top: 1px solid #f25252; /* Solid Red - Changed */
}

/* NEW: Hover distance labels - Red */
.multi-measure-hover-distance-label {
  position: absolute;
  /* background-color: #0075ff; */ /* Blue background - Original */
  background-color: #f25252; /* Red background - Changed */
  color: white;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999999; /* On top */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

/* NEW: Persistent distance lines - SOLID RED */
.multi-measure-persistent-distance-line {
  position: absolute;
  background-color: transparent;
  border-top: 1px solid #f25252;
  border-left: 1px solid #f25252;
  pointer-events: none;
  z-index: 999988; /* Slightly lower than hover lines */
}
.multi-measure-persistent-distance-line[style*="width: 1px"] {
  /* Vertical */
  border-top: none;
  border-left: 1px solid #f25252;
}
.multi-measure-persistent-distance-line[style*="height: 1px"] {
  /* Horizontal */
  border-left: none;
  border-top: 1px solid #f25252;
}

/* NEW: Persistent distance labels - RED */
.multi-measure-persistent-distance-label {
  position: absolute;
  background-color: #f25252;
  color: white;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999999; /* On top */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}