/* ================================================================
   SWAMP – Przepust hydrauliczny (WR-M-12)
   kalkulatory/przepust.css – uzupełnienie most.css
   ================================================================ */

/* ── Zakładki z podpisem trybu ───────────────────────────────── */
.calc-tab .tab-sub {
  display: block;
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 1px;
}
.calc-tab.active .tab-sub { opacity: 0.9; }

/* ── Rysunek na żywo w panelu bocznym ────────────────────────── */
.draw-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.75rem 0.75rem 0.6rem;
  margin-bottom: 1.1rem;
}
.draw-card svg { width: 100%; height: auto; display: block; }
.draw-card .draw-title {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.draw-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 0.6rem;
  align-items: end;
  margin-top: 0.4rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.5rem;
}
.draw-row p { font-size: 0.8rem; line-height: 1.55; color: var(--text3); margin: 0; }
#p_section svg { max-width: 170px; margin: 0 auto; }
#p_section:empty::before {
  content: 'przekrój przewodu';
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 2.2rem 0;
}

/* Tabela typów w panelu – warunki zawijane */
.wr-table.wrap td:not(:first-child),
.wr-table.wrap th:not(:first-child) { white-space: normal; text-align: left; }

/* ── Komunikaty ──────────────────────────────────────────────── */
.calc-msg .msg-sub { margin: 0.5rem 0 0; font-weight: bold; }

/* ── Tabela typoszeregu ──────────────────────────────────────── */
.tbl-scroll { overflow-x: auto; margin-bottom: 1.4rem; }
.dobor-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.calc-steps .dobor-table td,
.dobor-table th,
.dobor-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
  width: auto;
}
.dobor-table th { font-weight: normal; color: var(--muted); font-size: 0.8rem; }
.dobor-table th:first-child,
.calc-steps .dobor-table td:first-child { text-align: left; }
.calc-steps .dobor-table td.ev {
  text-align: left;
  white-space: normal;
  color: var(--text3);
  min-width: 220px;
}
.dobor-table tr.no td { color: var(--muted); }
.dobor-table tr.ok td { color: var(--text2); }
.calc-steps .dobor-table tr.sel td {
  background: var(--accent-bg);
  color: var(--accent2);
  font-weight: bold;
}

/* ── Wykres ──────────────────────────────────────────────────── */
.chart-box {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 0.9rem;
  margin-bottom: 1.5rem;
}
.chart-box-title { font-size: 0.95rem; color: var(--text); margin-bottom: 0.6rem; }
.chart-holder { position: relative; height: 320px; }
.chart-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }

/* ── Następny krok: stanowisko dolne ─────────────────────────── */
.next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1.5px dashed var(--border2);
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.5rem;
}
.next-step p { margin: 0; font-size: 0.92rem; color: var(--text3); max-width: 60ch; }

@media (max-width: 620px) {
  .draw-row { grid-template-columns: 1fr; }
  .chart-holder { height: 260px; }
  .calc-tab .tab-sub { display: none; }
}