/* =========================
   Punkfish Deco Planner – Trimix (light & responsive)
   Cleaned + consistent (no breaking removals)
   - Inputs a bit smaller + consistent
   - Labels no longer collide with fields
   - Segment boxes: inputs can be a bit wider
   - Stable 2-column layout via dp-cols (already used)
   ========================= */

/* ---------------------------------
   1) Local variables (scoped)
---------------------------------- */
.decotx-container {
  --dp-bg-frame: #ffffff;
  --dp-bg-card: #f7f7fb;
  --dp-bg-surface: #f0f2ff;
  --dp-border: #d7d9ef;
  --dp-border-strong: #c1c6ee;
  --dp-muted: #555a7a;
  --dp-accent: #f4c542;
  --dp-primary: #3b22a3;
  --dp-line: #e1e3f5;
  --dp-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --dp-ok: #1ec28b;
  --dp-warn: #ffb020;
  --dp-danger: #e74c3c;

  /* field sizing knobs */
  --dp-field-h: 34px;
  --dp-field-font: 0.88rem;

  /* default compact field width (gases) */
  --dp-field-w: 4.6rem;   /* ~74px */
  /* segment fields can be a bit wider */
  --dp-field-w-seg: 5.6rem; /* ~90px */
}

/* border-box everywhere inside the tool */
.decotx-container,
.decotx-container * {
  box-sizing: border-box;
}

/* ---------------------------------
   2) Frame / headings / notice
---------------------------------- */
.pf-tool-frame.decotx-container {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--dp-bg-frame);
  border-radius: 18px;
  padding: 20px 18px 22px;
  box-shadow: var(--dp-shadow);

  /* IMPORTANT: frame itself should not be grid (dp-cols handles layout) */
  display: block;
}

.decotx-container h1 {
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--dp-primary);
}

.decotx-container h2 {
  font-size: 1.05rem;
  margin: 0.5rem 0 0.5rem;
  color: #22264a;
}

.decotx-container h3 {
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
  color: var(--dp-muted);
}

.decotx-container .muted {
  color: var(--dp-muted);
  font-size: 0.9rem;
}

.decotx-container .warn {
  background: #fffdf3;
  border: 1px solid #f6e6aa;
  border-radius: 10px;
  padding: 8px 10px;
}

/* ---------------------------------
   3) Cards
---------------------------------- */
.decotx-container .dp-card {
  background: var(--dp-bg-card);
  border-radius: 14px;
  border: 1px solid var(--dp-border);
  padding: 12px 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------
   4) Stable 2-column layout (dp-cols)
---------------------------------- */
.decotx-container .dp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.decotx-container .dp-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px) {
  .decotx-container .dp-cols {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------
   5) Layout helpers: inner grids
---------------------------------- */
.decotx-container .grid {
  display: grid;
  gap: 12px;
}

.decotx-container .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.decotx-container .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decotx-container .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .decotx-container .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .decotx-container .grid-4,
  .decotx-container .grid-3,
  .decotx-container .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* GF + Switch policy line */
.decotx-container .row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}

.decotx-container .row-inline label {
  font-size: 0.88rem;
  color: var(--dp-muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ---------------------------------
   6) Label rows (critical fix: no overlap)
---------------------------------- */
/* Label-Reihen: 2 Spalten, Feldspalte darf schrumpfen */
.decotx-container label.row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--dp-field-w));
  align-items: center;
  column-gap: 10px;  /* kleiner */
  row-gap: 4px;
  margin: 6px 0;
}

/* Segment-Felder etwas breiter, aber ebenfalls schrumpfbar */
.decotx-container .seg label.row{
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--dp-field-w-seg));
}

.decotx-container label.row > span {
  color: var(--dp-muted);
  font-size: 0.9rem;
  line-height: 1.25;
  min-width: 0;           /* allow wrapping */
  overflow-wrap: anywhere;/* prevent collisions on narrow columns */
}

/* Strong outputs (MOD etc.) align like fields */
.decotx-container label.row strong {
  justify-self: end;
  font-size: 0.9rem;
  color: #22264a;
}

/* Segment inputs can be a bit wider than gas inputs */
.decotx-container .seg label.row {
  grid-template-columns: minmax(8.5rem, 1fr) var(--dp-field-w-seg);
}

/* Mobile: label above field */
@media (max-width: 720px) {
  .decotx-container label.row,
  .decotx-container .seg label.row {
    grid-template-columns: 1fr;
  }
  .decotx-container label.row strong {
    justify-self: start;
  }
}

/* ---------------------------------
   7) Form controls (unified + slightly smaller)
---------------------------------- */
.decotx-container input[type="number"],
.decotx-container input[type="text"],
.decotx-container input[type="search"] {
  border-radius: 10px;
  border: 1px solid var(--dp-border-strong);
  background: #ffffff;
  color: #222;
  font-size: var(--dp-field-font);
  height: var(--dp-field-h);
  padding: 6px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

/* Field sizing inside label rows */
.decotx-container label.row input[type="number"],
.decotx-container label.row input[type="text"]{
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch; /* wichtig: nicht nach rechts schieben */
  margin: 0;
}

/* Mobile: field full width */
@media (max-width: 720px) {
  .decotx-container label.row input[type="number"],
  .decotx-container label.row input[type="text"] {
    justify-self: start;
  }
}

.decotx-container input[type="number"]:focus,
.decotx-container input[type="text"]:focus {
  outline: none;
  border-color: var(--dp-primary);
  box-shadow: 0 0 0 2px rgba(59,34,163,0.16);
}

/* Range sliders fill row */
.decotx-container input[type="range"] {
  width: 100%;
}

/* ---------------------------------
   8) Segments
---------------------------------- */
.decotx-container .seg {
  background: var(--dp-bg-surface);
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.decotx-container .seg h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: #2b2f55;
}

/* ---------------------------------
   9) Buttons
---------------------------------- */
.decotx-container .btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.decotx-container button {
  background: #ffffff;
  color: #22264a;
  border: 1px solid var(--dp-border-strong);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.decotx-container button:hover {
  background: #f0f2ff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* ---------------------------------
   10) Canvas & Heatmaps
---------------------------------- */
.decotx-container .canvases {
  display: grid;
  gap: 10px;
}

.decotx-container canvas {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid var(--dp-border);
}

.decotx-container #depthChart {
  min-height: 220px;
}

.decotx-container #heatmapN2,
.decotx-container #heatmapHe,
.decotx-container #heatmapMix {
  min-height: 90px;
}

.decotx-container .legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.decotx-container .legend .bar {
  flex: 0 0 160px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--dp-border-strong);
}

/* ---------------------------------
   11) Runtime table & pills
---------------------------------- */
.decotx-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.decotx-container th,
.decotx-container td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--dp-line);
}

.decotx-container th {
  text-align: left;
  color: #2b2f55;
  font-weight: 600;
}

.decotx-container td {
  vertical-align: top;
}

.decotx-container .pill {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--dp-border-strong);
  color: #333557;
  font-size: 0.9rem;
}

/* ---------------------------------
   12) Small details
---------------------------------- */
.decotx-container strong {
  font-weight: 600;
}

/* ---------------------------------
   13) Compatibility: keep potential old selectors (no-op-ish)
   (These keep you safe if some parts still use .card etc.)
---------------------------------- */
/* If something still uses .card inside this tool, style it like dp-card */
.decotx-container .card {
  background: var(--dp-bg-card);
  border-radius: 14px;
  border: 1px solid var(--dp-border);
  padding: 12px 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* If any old "active" pseudo badges exist somewhere, don't show text */
.decotx-container .active::before,
.decotx-container .active::after,
.decotx-container .activeGas::before,
.decotx-container .activeGas::after{
  content: none !important;
}

/* =========================
   GASE: Label immer oben, Feld darunter (kein Überlappen)
   ========================= */

.decotx-container .dp-card-gases label.row{
  grid-template-columns: 1fr;   /* eine Spalte */
  row-gap: 6px;
  margin: 8px 0;
}

.decotx-container .dp-card-gases label.row > span{
  font-size: 0.85rem;
  line-height: 1.2;
}

.decotx-container .dp-card-gases label.row input[type="number"],
.decotx-container .dp-card-gases label.row input[type="text"]{
  width: 100%;
  max-width: 6rem;              /* schmal, Zahlen passen rein */
  justify-self: start;
}

/* =========================
   SEGMENTE: Label immer oben, Feld darunter (kein Überlappen)
   ========================= */

.decotx-container .seg label.row{
  grid-template-columns: 1fr;  /* eine Spalte */
  row-gap: 6px;
  margin: 8px 0;
}

.decotx-container .seg label.row > span{
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Segment-Felder: etwas breiter als Gas-Felder */
.decotx-container .seg label.row input[type="number"],
.decotx-container .seg label.row input[type="text"]{
  width: 100%;
  max-width: 7rem;             /* etwas breiter für z.B. Tiefe/Dauer */
  justify-self: start;
}


/* GF nebeneinander, wie deine anderen Number-Inputs */
.gf-inline{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  min-width: 320px; /* optional: verhindert "zu schmal" */
}

/* Output ausblenden, aber im DOM lassen (JS-kompatibel) */
.gf-out{
  display: none !important;
}

/* Optional: falls es auf kleinen Screens umbrechen soll */
@media (max-width: 700px){
  .gf-inline{ grid-template-columns: 1fr; }
}

/* Heatmap-Legende */
.heatmap-legend{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.heat-bar{
  width: 100%;
  height: 10px;
  border-radius: 4px;
}

.heat-label{
  font-size: 0.8rem;
  color: var(--pf-muted, #666);
}