/* Put table (left) and radios (right) side-by-side */
.results-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.results-controls-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px; /* NEW */
}

/* Right column: vertical radio group */
.results-controls-vertical {
  /* Remove this line ↓ */
  /* background: #fff; */

  background: transparent; /*  inherit from parent (pink) */
  border: 3px solid #e3ccd6;
  border-radius: 10px;
  padding: 10px;
}
.results-controls-vertical legend {
  margin-bottom: 6px;
}
.metric-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.metric-option input {
  /* keep native radio but subtle */
  transform: scale(1.1);
}

/* Colored chips for the options */
.metric-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}
.chip-cost {
  background: #fff5c2;
  border-color: #eadb7a;
} /* light yellow */
.chip-eff {
  background: #dff9d9;
  border-color: #b7e7ad;
} /* light green */
.chip-pref {
  background: #d9ecff;
  border-color: #aacdf3;
} /* light blue */

/* Table basics */
#resultsTable {
  width: 100%;
  border-collapse: collapse;
}
#resultsTable thead th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #dcb7c6;
  background: #f7eaf0;
}
#resultsTable tbody td {
  padding: 6px 8px;
}
#resultsTable td.num {
  text-align: right;
}

/* Selection highlight (from earlier) */
#resultsTable tbody tr.selected {
  outline: 2px solid #b15886;
  background: #ffe0ef !important;
}

/* Column tint that follows selected metric (class toggled on #resultsSection) */
#resultsSection.rank-cost .col-cost {
  background: #fffbea;
} /* very light yellow */
#resultsSection.rank-eff .col-eff {
  background: #effbea;
} /* very light green */
#resultsSection.rank-pref .col-pref {
  background: #edf6ff;
} /* very light blue */

.results-selection-status {
  margin-bottom: 10px;
  font-size: 1rem;
  font-style: italic;
  text-align: left;
  color: #444;
}

/* ======== Solution Summary Panel ======== */
.solution-summary {
  width: 100%;
  min-height: 100px;
  border: 2px solid #e3ccd6;
  border-radius: 10px;
  padding: 10px 14px;
  background: transparent; /* inherits section background */
}

.solution-summary legend {
  font-weight: bold;
  font-size: 1rem;
  padding: 0 6px;
  margin-bottom: 6px;
}

.summary-placeholder {
  font-style: italic;
  color: #666;
}
/* 3-column layout for results section */
.results-layout {
  display: flex;
  gap: 2rem; /* adjust column gap here */
  align-items: flex-start;
}

/* Shared column settings */
.results-col {
  padding: 0.5rem;
}

/* Customize column widths */
.col-left {
  flex: 1.3 1 0; /* flexible grow/shrink */
  min-width: 480px; /* don’t let table get too narrow */
}

.col-middle {
  flex: 0 0 160px; /* fixed-ish width */
  align-self: flex-start;
}

.results-controls-vertical {
  width: 100%;
} /* fieldset fills middle col */

.col-right {
  flex: 1.9 1 0; /* summary gets more space */
  min-width: 360px;
}

/* ======== Results Table ======== */
.col-cost.active-metric {
  background-color: #fff8dc; /* light yellow */
}

.col-eff.active-metric {
  background-color: #e6ffe6; /* light green */
}

.col-pref.active-metric {
  background-color: #e6f0ff; /* light blue */
}

/* ======== for buttons ======== */
.results-action-buttons {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.results-btn {
  padding: 6px 12px;
  font-weight: bold;
}

.summary-line {
  margin-bottom: 6px;
}

.summary-section {
  margin-top: 12px;
  font-weight: bold;
}

.summary-provider {
  margin-top: 10px;
  margin-left: 8px;
  font-weight: bold;
  color: #3a3a3a;
}

.summary-prod-line {
  margin-left: 20px;
  font-family: monospace;
  font-size: 0.95rem;
  color: #444;
}

.summary-note {
  margin-top: 12px;
  font-style: italic;
  color: #666;
}

/* ======== Collapsible Summary Panel ======== */
.summary-card {
  border: 1px solid var(--border-200, #d9d9d9);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 12px;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.summary-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.summary-sub {
  color: #666;
  font-size: 0.9rem;
}

.summary-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.summary-controls button {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #f7f7f7;
  cursor: pointer;
}

.wm-collapsible {
  border: 1px solid #eee;
  border-radius: 10px;
  margin: 8px 0;
  padding: 0;
}

.wm-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
}
.wm-collapsible > summary::-webkit-details-marker {
  display: none;
}

.wm-collapsible > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease-in-out;
}

.wm-collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.wm-collapsible-body {
  padding: 10px 12px 12px 28px;
  border-top: 1px solid #eee;
}

.metrics-list,
.simple-list {
  margin: 0;
  padding-left: 1.2rem;
}
.metrics-list li,
.simple-list li {
  margin: 2px 0;
}

/* ======== Results → Solution Summary Cards ======== */
.solution-card {
  /* visually similar to .summary-card (manual copy) */
  border: 1px solid #e3ccd6; /* same family as section border */
  border-radius: 12px;
  background: #fff;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.solution-card h3 {
  margin: 0 0 6px 0;
  color: #4a2e39;
  font-size: 1.05rem;
}

.solution-metrics h4,
.solution-purchases h4 {
  margin: 8px 0 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3a3a3a;
  border-bottom: 1px solid #ead8e0;
  padding-bottom: 2px;
}

.metrics-table,
.purchases-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 0.92rem;
}

.metrics-table td:first-child {
  width: 55%;
  font-weight: 600;
  padding-right: 4px;
  color: #333;
}

.metrics-table td:last-child,
.purchases-table td:last-child {
  text-align: right;
}

.purchases-table .provider-row {
  background: #f9f1f5;
  font-weight: 600;
  color: #4a2e39;
}

.purchases-table .subtotal-row td {
  border-top: 1px solid #e3ccd6;
  font-weight: 600;
}

.right-align {
  text-align: right;
}

.summary-empty {
  font-style: italic;
  color: #777;
  padding: 6px 2px;
}

/* Tweak metrics layout for readability */
.metrics-table {
  width: auto; /* let content define width */
  border-collapse: collapse;
}

.metrics-table td:first-child {
  padding-right: 10px; /* add space between label and value */
  white-space: nowrap;
}

.metrics-table td:last-child {
  text-align: left; /* move values closer to labels */
  padding-left: 4px;
  font-variant-numeric: tabular-nums; /* keep digits aligned */
}
.results-multi-select-tip {
  font-size: 1.2rem;
  font-style: italic;
  color: #444;
  margin: 4px 0 10px 4px;
}

.results-multi-select-tip .kbd {
  display: inline-block;
  padding: 1px 4px;
  margin: 0 2px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.85rem;
}