/* boiler-3d.css — LRES-MAB-006 Lane C · the 3D Model sub-tab of the Job Card.
 *
 * Ported from LRES_BOILER_3D_Technical_v0.7, rehoused inside the card chassis
 * (see LRES_JOBCARD_SCOPE_3D_v1: .lres-subtab-panel is the parent).
 *
 * Brand: #009A42 LRES green, #1F2937 anthracite, #6B7280 mid grey. NO BLUE
 * ANYWHERE. Heatmap ramp #0B7A4B → #E8A33D → #C0392B. Shift colours #FFD34D day
 * / #1F2937 night are LOCKED. Body font Arial 11pt-equivalent.
 *
 * Everything is namespaced .b3d-* so it cannot leak into the rest of the card.
 */

.b3d-root {
  --b3d-green: #009A42;
  --b3d-green-dk: #00722F;
  --b3d-anth: #1F2937;
  --b3d-mut: #6B7280;
  --b3d-line: #E5E7EB;
  --b3d-amber-bg: #FFF2CC;
  --b3d-amber-tx: #7F6000;
  --b3d-red: #C0392B;
  --b3d-orange: #C05621;
  --b3d-day: #FFD34D;
  display: flex;
  min-height: 560px;
  height: 72vh;
  border: 1px solid var(--b3d-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--b3d-anth);
}

/* ───────────────────────────── left rail ───────────────────────────── */
.b3d-rail {
  width: 216px;
  flex: none;
  background: #fff;
  border-right: 1px solid var(--b3d-line);
  overflow-y: auto;
  padding: 10px;
}
.b3d-rail h4,
.b3d-panel h4 {
  font-size: 10px;
  letter-spacing: .7px;
  color: var(--b3d-mut);
  margin: 12px 0 6px;
  text-transform: uppercase;
}
.b3d-rail h4:first-child { margin-top: 0; }
.b3d-note { font-weight: normal; font-size: 9px; text-transform: none; }
.b3d-mut { font-size: 11px; color: var(--b3d-mut); line-height: 1.5; }
.b3d-mut.i { font-style: italic; }
.b3d-mini { display: block; font-size: 9.5px; color: var(--b3d-mut); }

.b3d-lrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  padding: 3px 0;
  cursor: pointer;
}
.b3d-lrow .b3d-cnt { margin-left: auto; font-size: 10px; color: var(--b3d-mut); }
.b3d-tick {
  width: 12px; height: 12px; flex: none;
  border: 1px solid #C9CFD5; border-radius: 3px; background: #fff;
}
.b3d-tick.on { background: var(--b3d-green); border-color: var(--b3d-green); position: relative; }
.b3d-tick.on::after {
  content: ""; position: absolute; left: 3px; top: 0px;
  width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.b3d-elev {
  display: block; width: 100%; text-align: left; padding: 4px 8px; font-size: 11px;
  border: 1px solid transparent; background: none; border-radius: 5px; cursor: pointer;
  font-family: inherit; color: var(--b3d-anth);
}
.b3d-elev:hover { background: #F4F8F4; }
.b3d-elev.on { background: rgba(0, 154, 66, .13); border-color: var(--b3d-green); font-weight: bold; }

.b3d-slider { width: 100%; accent-color: var(--b3d-green); }
.b3d-slbl { display: flex; justify-content: space-between; font-size: 10px; color: var(--b3d-mut); }
.b3d-vb { display: flex; gap: 4px; flex-wrap: wrap; }

.b3d-hbtn {
  padding: 4px 10px; border-radius: 13px; border: 1px solid var(--b3d-line);
  background: rgba(255, 255, 255, .95); font-weight: bold; font-size: 11px;
  cursor: pointer; color: var(--b3d-mut); font-family: inherit;
}
.b3d-hbtn.on { background: var(--b3d-green); color: #fff; border-color: var(--b3d-green); }
.b3d-hbtn.dk.on { background: var(--b3d-anth); border-color: var(--b3d-anth); }

/* Add-Work palette */
.b3d-awpal { border-top: 2px solid var(--b3d-green); margin-top: 10px; display: none; }
.b3d-awpal.open { display: block; }
.b3d-awpal .b3d-vb { margin-bottom: 5px; }
.b3d-hint { color: var(--b3d-mut); font-size: 9.5px; margin-top: 4px; line-height: 1.45; }
.b3d-hint.b3d-pend { color: var(--b3d-orange); font-weight: bold; }
.b3d-dims {
  display: flex; gap: 6px; align-items: center; color: var(--b3d-mut);
  font-size: 10px; margin: 4px 0;
}
.b3d-dims input { width: 52px; font-family: inherit; font-size: 10px; padding: 2px 4px; }

/* ───────────────────────────── stage ───────────────────────────── */
.b3d-stagewrap { flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.b3d-stage {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 32%, #ffffff 0%, #eef1f3 58%, #dde3e7 100%);
}
.b3d-canvas { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.b3d-canvas canvas { display: block; }

.b3d-hud { position: absolute; top: 8px; left: 8px; z-index: 6; display: flex; gap: 5px; flex-wrap: wrap; max-width: 70%; }
.b3d-hud2 { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.b3d-crumb3d {
  position: absolute; top: 42px; left: 8px; z-index: 6; display: flex; gap: 4px;
  align-items: center; font-size: 10.5px; font-weight: bold;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--b3d-line);
  border-radius: 12px; padding: 3px 10px;
}
.b3d-crumb3d button {
  border: none; background: none; color: var(--b3d-green-dk);
  font-weight: bold; cursor: pointer; font-family: inherit; font-size: 10.5px;
}
.b3d-crumb3d span { color: #B6BEC7; }
.b3d-gr { color: var(--b3d-green-dk); }

.b3d-scrub {
  position: absolute; left: 8px; bottom: 30px; z-index: 6;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--b3d-line);
  border-radius: 7px; padding: 4px 8px; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; max-width: calc(100% - 16px);
}
.b3d-shead { font-size: 9.5px; font-weight: bold; display: flex; gap: 8px; align-items: center; }
.b3d-shifts { display: flex; gap: 2px; flex-wrap: wrap; }
.b3d-sh {
  min-width: 27px; height: 17px; padding: 0 3px; border-radius: 3px; font-size: 8px;
  font-weight: bold; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
}
.b3d-sh.d { background: var(--b3d-day); color: var(--b3d-anth); }     /* LOCKED */
.b3d-sh.n { background: var(--b3d-anth); color: #fff; }               /* LOCKED */
.b3d-sh.on { border-color: var(--b3d-green); }

.b3d-status {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: rgba(31, 41, 55, .92); color: #D7DEE5; font-size: 10.5px;
  padding: 4px 12px; display: flex; gap: 18px; flex-wrap: wrap;
  font-family: Consolas, Menlo, monospace;
}
.b3d-status b { color: #7ED9A5; }
.b3d-right { margin-left: auto; }

.b3d-labels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.b3d-zlabel {
  position: absolute; transform: translate(-50%, -50%);
  background: rgba(31, 41, 55, .85); color: #fff; font-size: 9.5px; font-weight: bold;
  padding: 2px 8px; border-radius: 9px; white-space: nowrap;
}
.b3d-zlabel.sel { background: var(--b3d-green); }
.b3d-zlabel.site { font-size: 10.5px; padding: 3px 10px; }
.b3d-tip {
  position: absolute; z-index: 7; background: #fff; border: 1px solid var(--b3d-line);
  border-radius: 6px; padding: 4px 9px; font-size: 10.5px; font-weight: bold;
  pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); display: none;
}

/* ─────────────────── 2D SVG fallback (no WebGL) ─────────────────── */
.b3d-fallback { position: absolute; inset: 0; display: none; overflow: auto; padding: 8px; }
.b3d-f-note {
  font-size: 10.5px; font-weight: bold; color: var(--b3d-amber-tx);
  background: var(--b3d-amber-bg); border-radius: 4px; padding: 4px 8px; margin-bottom: 6px;
}
.b3d-f-svg { width: 100%; height: auto; max-height: calc(100% - 34px); display: block; }
.b3d-f-zone { stroke: var(--b3d-anth); stroke-width: 1; cursor: pointer; }
.b3d-f-zone.sel { stroke: var(--b3d-green); stroke-width: 3; }
.b3d-f-comp {
  stroke: var(--b3d-anth); stroke-width: .8; fill-opacity: .55; cursor: pointer;
  stroke-dasharray: 3 2;
}
.b3d-f-comp.sel { stroke: var(--b3d-green); stroke-width: 2.5; stroke-dasharray: none; }
.b3d-f-lbl { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; fill: var(--b3d-anth); }
.b3d-f-unit { fill: #76FF03; stroke: var(--b3d-anth); stroke-width: 1; cursor: pointer; }
.b3d-f-pin { stroke: #fff; stroke-width: 1.5; cursor: pointer; }

/* ───────────────────────────── price bar ───────────────────────────── */
.b3d-pricebar {
  background: var(--b3d-anth); color: #fff; padding: 8px 14px; display: flex;
  gap: 16px; align-items: center; flex-wrap: wrap; font-size: 11.5px;
}
.b3d-pricebar b { color: #2ECC71; font-size: 13.5px; }
.b3d-gatechip {
  background: rgba(192, 57, 43, .2); color: #F5B7B1; font-weight: bold;
  font-size: 10px; padding: 2px 9px; border-radius: 9px;
}
.b3d-okchip {
  background: rgba(0, 154, 66, .22); color: #7ED9A5; font-weight: bold;
  font-size: 10px; padding: 2px 9px; border-radius: 9px;
}

/* ───────────────────────────── right panel ───────────────────────────── */
.b3d-panel {
  width: 336px; flex: none; background: #fff; border-left: 1px solid var(--b3d-line);
  overflow-y: auto; padding: 12px;
}
.b3d-panel h3 {
  font-size: 12.5px; border-bottom: 3px solid var(--b3d-green);
  display: inline-block; padding-bottom: 2px; margin: 0 0 8px;
}
.b3d-zrowl { display: flex; flex-wrap: wrap; gap: 4px; }
.b3d-zrb {
  padding: 3px 9px; border-radius: 11px; border: 1px solid var(--b3d-line);
  background: #fff; font-size: 10.5px; font-weight: bold; cursor: pointer;
  color: var(--b3d-mut); font-family: inherit;
}
.b3d-zrb.on { background: var(--b3d-green); color: #fff; border-color: var(--b3d-green); }
.b3d-zrb .b3d-n { opacity: .75; }
.b3d-bcrumb { font-size: 12px; font-weight: bold; margin: 10px 0 2px; }
.b3d-bcrumb .b3d-sep { color: #B6BEC7; margin: 0 4px; }

.b3d-taskrow {
  border: 1px solid var(--b3d-line); border-left: 4px solid var(--b3d-green);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 5px; font-size: 11px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.b3d-taskrow .b3d-val { margin-left: auto; }
.b3d-chip {
  display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px;
  font-weight: bold; background: #EFF1F3; color: #445; margin: 1px 2px 1px 0;
}
.b3d-chip.ok { background: rgba(0, 154, 66, .14); color: var(--b3d-green-dk); }
.b3d-chip.warn { background: rgba(192, 86, 33, .14); color: var(--b3d-orange); }
.b3d-badge {
  display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 9.5px;
  font-weight: bold; letter-spacing: .3px;
}
.b3d-badge.tbc { background: var(--b3d-amber-bg); color: var(--b3d-amber-tx); }

.b3d-rowitem {
  display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  padding: 3px 0; border-bottom: 1px dashed #eef0f2; align-items: center;
}
.b3d-rowitem:last-child { border-bottom: none; }
.b3d-err {
  background: rgba(192, 57, 43, .1); border-left: 4px solid var(--b3d-red);
  color: #7B241C; font-size: 11px; padding: 8px; border-radius: 4px; margin-bottom: 10px;
}

.b3d-btn {
  background: var(--b3d-green); color: #fff; border: none; padding: 7px 12px;
  font-weight: bold; font-size: 12px; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.b3d-btn.ghost { background: #fff; color: var(--b3d-anth); border: 1px solid var(--b3d-line); }
.b3d-btn.sm { padding: 3px 8px; font-size: 10.5px; }
.b3d-btn.wide { width: 100%; margin: 8px 0; }

/* ───────────────────────── toast + pin sheet ───────────────────────── */
.b3d-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100000;
  background: var(--b3d-anth); color: #fff; padding: 9px 16px; border-radius: 8px;
  font-size: 12px; display: none; box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
  font-family: Arial, Helvetica, sans-serif; max-width: 70vw;
}
.b3d-toast.open { display: block; }
.b3d-toast.err { background: #7B241C; }

.b3d-modal {
  position: fixed; inset: 0; z-index: 100001; display: none;
  background: rgba(31, 41, 55, .45); align-items: center; justify-content: center;
  font-family: Arial, Helvetica, sans-serif;
}
.b3d-modal.open { display: flex; }
.b3d-sheet {
  background: #fff; border-radius: 10px; padding: 16px; width: 420px; max-width: 92vw;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.b3d-sheet h3 {
  font-size: 13px; border-bottom: 3px solid var(--b3d-green); display: inline-block;
  padding-bottom: 2px; margin: 0 0 8px;
}
.b3d-fld { display: block; font-size: 10px; letter-spacing: .5px; color: var(--b3d-mut); margin: 8px 0 0; }
.b3d-fld select,
.b3d-fld textarea,
.b3d-fld input {
  display: block; width: 100%; margin-top: 3px; font-family: inherit; font-size: 12px;
  padding: 5px 6px; border: 1px solid var(--b3d-line); border-radius: 5px; color: var(--b3d-anth);
}
.b3d-sheet .b3d-vb { margin-top: 12px; }

/* ───────────────────────────── responsive ───────────────────────────── */
@media (max-width: 1180px) {
  .b3d-panel { width: 290px; }
}
@media (max-width: 1000px) {
  .b3d-rail { display: none; }
}
@media (max-width: 820px) {
  .b3d-root { flex-direction: column; height: auto; }
  .b3d-panel { width: auto; border-left: none; border-top: 1px solid var(--b3d-line); max-height: 44vh; }
  .b3d-stage { min-height: 420px; }
}