/* Control column beside the map. The tint of the property overview cards. */
/* In a narrow column a long label wraps instead of widening the button. */
.mfo-workflow-shell .map-panel .widget-button {
  min-width: 0 !important;
  height: auto !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.mfo-workflow-shell .map-panel {
  background: #f7fbf2;
  border: 1px solid #cfe2c9;
  border-radius: 12px;
  padding: 14px;
}

.mfo-selection-summary {
  border-top: 1px solid #cfe2c9;
  padding-top: 14px;
}

.mfo-locked-count {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mfo-selection-notice {
  margin-top: 10px;
}

.mfo-selection-hint {
  margin-top: 6px;
}

.mfo-legend-heading {
  font-size: 0.9rem;
  font-weight: 600;
}

.mfo-overlay-legend {
  font-size: 0.9rem;
}

.mfo-overlay-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mfo-overlay-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  flex-shrink: 0;
  border: 3px solid;
  background: transparent;
}

.mfo-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #888;
  border-radius: 2px;
}

/* No margin: the gap of the control column gives the space. */
.mfo-map-divider {
  border-top: 1px solid #cfe2c9;
}

.mfo-legend-divider {
  border-top: 1px solid #cfe2c9;
  margin: 12px 0;
}

.mfo-intersection-hint {
  color: #b91c1c;
}

/* Plotly map modebar: shown permanently (displayModeBar=True) and
   enlarged from the cramped default so the pan / zoom / reset / select
   buttons are easy to hit. */
.mfo-plotly-map .modebar {
  opacity: 1 !important;
}

.mfo-plotly-map .modebar-btn {
  padding: 6px 9px !important;
}

.mfo-plotly-map .modebar-btn svg {
  transform: scale(2);
}

/* Clickable map legend: an inline colored swatch (HTML) + a flat text
   label per category. Clicking a label selects all stands of that category. */
.mfo-legend-label {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  color: #212529 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  padding: 1px 6px !important;
}

.mfo-legend-label:hover {
  background: #e9ecef !important;
  cursor: pointer;
}

/* A legend category that cannot be clicked. */
.mfo-legend-text {
  color: #212529;
  padding: 1px 6px;
}

/* One text size for the legend texts and the view radio buttons. */
.mfo-workflow-shell .mfo-legend-row .widget-html-content,
.mfo-workflow-shell .mfo-view-choice .widget-radio-box label {
  font-size: 0.9rem !important;
}

.mfo-workflow-shell .mfo-view-choice .widget-radio-box label {
  color: #212529;
}

/* ipywidgets give each row a fixed 28 px height and line height; let the text set it. */
.mfo-workflow-shell :is(.map-panel, .mfo-view-choice, .mfo-legend-row) > .widget-html,
.mfo-workflow-shell :is(.map-panel, .mfo-view-choice, .mfo-legend-row) .widget-html-content,
.mfo-workflow-shell .mfo-legend-row > .widget-button {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}

.mfo-workflow-shell .mfo-legend-row {
  margin: 2px 0 !important;
}

/* main.css puts a 10 px gap between all widgets; remove it between legend rows. */
.mfo-workflow-shell .widget-box:has(> .mfo-legend-row) {
  gap: 0;
}

.mfo-workflow-shell .mfo-view-choice .widget-radio-box {
  padding-top: 2px;
}