/* Samma Dimensionera efter-komponent som i kanaldimensionering. */
.dimension-method .dimension-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 0;
  height: 44px;
  margin-bottom: 10px;
  border: 1px solid #d6dde4;
  background: #fff;
}

.dimension-method .dimension-choice:last-child { margin-bottom: 0; }

.dimension-method .dimension-choice:has(.mode-option input:checked) {
  border-color: #6f94aa;
  background: #d8e7ef;
  color: #12344b;
}

.dimension-method .mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dimension-method .mode-option input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.dimension-method .mode-option::before {
  content: "";
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #8492a0;
  border-radius: 50%;
  background: transparent;
}

.dimension-method .mode-option:has(input:checked)::before {
  border-color: #12344b;
  background: radial-gradient(circle, #12344b 0 4px, transparent 4.5px);
}

.dimension-method .mode-label {
  display: inline;
  flex: 1;
  margin: 0;
  color: inherit;
  font-size: .85rem;
  font-weight: 400;
}

.dimension-method .method-limit {
  display: flex;
  align-self: center;
  min-width: 0;
  height: 34px;
  margin: 4px;
  border: 1px solid #9db4c3;
  background: #fff;
}

.dimension-method .method-limit input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 32px;
  padding: 0 9px;
  border: 0 !important;
  border-radius: 0;
  background: #fff;
}

.dimension-method .method-limit select,
.dimension-method .method-limit span {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  width: 70px;
  max-width: 70px;
  height: 32px;
  padding: 0 9px;
  border: 0 !important;
  border-left: 1px solid #d6dde4 !important;
  border-radius: 0;
  background: #f3f5f7;
  color: #45576b;
  font-size: .78rem;
  font-weight: 700;
}

.dimension-method .method-limit select {
  flex: 0 0 70px;
}

/* Rördimension: samma valmönster som kanaltyp, med manuell storlek vid behov. */
.field-row.two { grid-template-columns: 3fr 2fr; }
.pipe-sizing { display: grid; grid-template-columns: max-content minmax(190px, 1fr); gap: 6px 8px; align-items: end; margin-top: 16px; }
.pipe-sizing-label { grid-column: 1; grid-row: 1; margin: 0; font-size: .76rem; font-weight: 700; color: #415166; }
.pipe-sizing-options { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 8px; }
.pipe-sizing-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d6dde4;
  background: #fff;
  color: #12344b;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.pipe-sizing-option > span:last-child { display: inline; margin: 0; }
.pipe-sizing-option:has(input:checked) { border-color: #6f94aa; background: #d8e7ef; }
.pipe-sizing-option input { position: absolute; width: 0; height: 0; opacity: 0; }
.pipe-sizing-option .control-marker { display: block; margin: 0; }
.pipe-sizing-option:has(input:checked) .control-marker { border-color: #557b91; background: radial-gradient(circle, #557b91 0 4px, transparent 4.5px); }
.manual-pipe-size { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: stretch; justify-content: end; gap: 6px; min-width: 190px; margin: 0; }
.manual-pipe-size > span { display: block; margin: 0; color: #415166; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.manual-pipe-size select { width: 100%; min-width: 190px; }
.manual-pipe-size.is-disabled { opacity: .48; }
.manual-pipe-size.is-disabled select { cursor: not-allowed; background: #f3f5f7; color: #718093; }
.compare-material-field { display: block; margin-top: 14px; }
.compare-material-field > span { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 700; color: #415166; }

/* Två tydliga, materialbundna färger vid jämförelse. */
.chart-bar .bar-fill { background: #c6ced6; }
.chart-bar.is-recommended .bar-fill { background: #176f50; }
.chart-bar.material-primary .bar-fill { background: #df8128; }
.chart-bar.material-comparison .bar-fill { background: #7460a8; }
.chart-bar.material-primary .bar-label,
.chart-bar.material-comparison .bar-label { white-space: normal; line-height: 1.25; }
tr.material-primary { background: #fff0df; font-weight: 800; }
tr.material-comparison { background: #eee9fa; font-weight: 800; }

/* Luft under diagrammet så att rördimensionerna inte ligger mot ramen. */
.bar-chart { min-height: 324px; padding-bottom: 40px; }
.bar-label { top: calc(100% + 17px); }

/* Varningar för manuellt vald rördimension. */
.warning { border-left-color: #b42318; background: #fff0f0; color: #8a1c18; }
.warning.warning--low { border-left-color: #b9811d; background: #fff7df; color: #76520c; }
.warning.warning--target { border-left-color: #b9811d; background: #fff7df; color: #76520c; }

/* Resultatets färg visar om vald dimension klarar målet och riktvärdena. */
.result-summary.is-warning { background: #b9811d; }
.result-summary.is-critical { background: #b42318; }

@media(max-width:620px){
  .dimension-method .dimension-choice { grid-template-columns: 1fr; height: auto; }
  .dimension-method .method-limit { border-top: 1px solid #d6dde4; border-right: 0; border-bottom: 0; border-left: 0; }
  .pipe-sizing { grid-template-columns: 1fr; }
  .pipe-sizing-label, .pipe-sizing-options, .manual-pipe-size { grid-column: 1; grid-row: auto; }
  .pipe-sizing-options { flex-wrap: wrap; }
  .manual-pipe-size { min-width: 0; }
}