/* src/styles/bpx-configurator.css */
/**
 * @fileoverview Stylesheet chuẩn cho B+ 3D Isometric Configurator & Taxonomy Hero:
 * - Full-Height Hero Section sử dụng `100dvh` (dynamic viewport height)
 * - Floating Sticky Left Icon Rail (`.os-rail`)
 * - Horizontal Config Bar với ô nhập số trực tiếp (`<input type="number">`) & `<input type="range">`
 * - Diễn hoạt 6 bước lắp đặt Isometric SVG
 */

/* 1. FLOATING STICKY LEFT RAIL */
.os-body-grid {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  position: relative !important;
}

.os-rail {
  position: sticky !important;
  top: 20px !important;
  align-self: start !important;
  z-index: 90 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 10px 7px !important;
  border-radius: 20px !important;
  background: rgba(244, 241, 234, 0.86) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(42, 36, 31, 0.08) !important;
  box-shadow: 0 12px 32px rgba(28, 25, 22, 0.07) !important;
  block-size: max-content !important;
  min-height: 0 !important;
}

/* 2. FULL-HEIGHT HERO SECTIONS (100dvh) */
.os-main {
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  box-sizing: border-box !important;
}

.os-workspace-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-block-end: 4px !important;
  padding-inline-end: 4px !important;
  position: relative !important;
  z-index: 80 !important;
}

.os-stage-area,
.os-stage.is-centered-stage,
.os-stage {
  position: relative !important;
  min-block-size: calc(100vh - 195px) !important;
  min-block-size: calc(100dvh - 195px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-block: 0 12px !important;
  margin-block-end: 24px !important;
  box-sizing: border-box !important;
}

.os-stage-canvas-wrap,
.os-iso-canvas {
  inline-size: 100% !important;
  max-inline-size: 1240px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  min-block-size: 400px !important;
}

#bpx-office-anatomy-svg {
  inline-size: 100% !important;
  block-size: calc(100vh - 295px) !important;
  block-size: calc(100dvh - 295px) !important;
  min-block-size: 400px !important;
  max-block-size: 640px !important;
  display: block !important;
  overflow: visible !important;
}

/* Full-height Hero cho Bản vẽ Isometric 3D Product Taxonomy trên /products */
.os-taxonomy-stage,
.os-tax-stage {
  position: relative !important;
  min-block-size: calc(100vh - 195px) !important;
  min-block-size: calc(100dvh - 195px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-block: 8px 18px !important;
  margin-block-end: 24px !important;
  box-sizing: border-box !important;
}

.os-taxonomy-canvas-wrap {
  inline-size: 100% !important;
  max-inline-size: 1240px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

#bpx-taxonomy-svg,
.os-tax-svg {
  inline-size: 100% !important;
  max-inline-size: 1140px !important;
  block-size: calc(100vh - 290px) !important;
  block-size: calc(100dvh - 290px) !important;
  min-block-size: 400px !important;
  max-block-size: 640px !important;
  display: block !important;
  overflow: visible !important;
}

/* 3. HORIZONTAL INTERACTIVE CONFIGURATOR BAR & DIRECT NUMERIC INPUTS */
.os-hconfig-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 8px;
  border-radius: 16px;
  border: 1px solid rgba(42, 36, 31, 0.09);
  box-shadow: 0 8px 24px rgba(28, 25, 22, 0.05);
  max-inline-size: 100%;
  box-sizing: border-box;
}

.os-hcfg-item {
  position: relative;
}

.os-hcfg-inline-group,
.os-hcfg-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.65);
  color: #1F1D1A;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.os-hcfg-trigger {
  cursor: pointer;
  padding: 7px 12px;
}

.os-hcfg-inline-group:hover,
.os-hcfg-trigger:hover,
.os-hcfg-item.is-open .os-hcfg-inline-group,
.os-hcfg-item.is-open .os-hcfg-trigger {
  background: #FFFFFF;
  border-color: rgba(201, 99, 50, 0.38);
  box-shadow: 0 4px 12px rgba(28, 25, 22, 0.06);
}

.os-hcfg-lbl {
  color: #7D756B;
  font-weight: 500;
  user-select: none;
}

.os-hcfg-unit {
  color: #3D3833;
  font-weight: 700;
  font-size: 12.5px;
}

.os-hcfg-val {
  color: #1F1D1A;
  font-weight: 700;
}

/* Ô nhập số trực tiếp ngay trên thanh ngang */
.os-hcfg-inline-input {
  inline-size: 54px;
  padding: 3px 5px;
  border-radius: 7px;
  border: 1px solid rgba(42, 36, 31, 0.14);
  background: #FAF8F4;
  color: #1F1D1A;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.os-hcfg-inline-input--staff {
  inline-size: 44px;
}

.os-hcfg-inline-input::-webkit-outer-spin-button,
.os-hcfg-inline-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.os-hcfg-inline-input:focus-visible,
.os-hcfg-num-input:focus-visible {
  outline: 2px solid #C96332;
  outline-offset: 1px;
  background: #FFFFFF;
  border-color: #C96332;
}

.os-hcfg-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  margin-inline-start: 2px;
  border-radius: 6px;
  border: 0;
  background: rgba(42, 36, 31, 0.06);
  color: #5C554C;
  cursor: pointer;
}

.os-hcfg-caret-btn:hover {
  background: rgba(201, 99, 50, 0.16);
  color: #C96332;
}

.os-hcfg-caret {
  font-size: 11px;
  line-height: 1;
}

/* Nút Phân tích & Bố trí lại */
.os-hcfg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.os-hcfg-btn--analyze {
  background: #FFFFFF;
  color: #1F1D1A;
  border: 1px solid rgba(42, 36, 31, 0.14);
}

.os-hcfg-btn--analyze:hover,
.os-hcfg-item.is-open .os-hcfg-btn--analyze {
  border-color: #C96332;
  color: #C96332;
}

.os-hcfg-btn--relayout {
  background: #C96332;
  color: #FFFFFF;
  border: 1px solid #B55426;
  box-shadow: 0 6px 16px rgba(201, 99, 50, 0.25);
}

.os-hcfg-btn--relayout:hover {
  background: #B55426;
  transform: translateY(-1px);
}

/* 4. POPOVER DROPDOWNS */
.os-hcfg-popover {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 120;
  inline-size: 276px;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(252, 250, 246, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(42, 36, 31, 0.11);
  box-shadow: 0 20px 44px rgba(28, 25, 22, 0.15);
}

.os-hcfg-popover[hidden] {
  display: none !important;
}

.os-hcfg-popover--zones {
  inline-size: 288px;
}

.os-hcfg-popover--analyze {
  inline-size: 330px;
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.os-hcfg-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 10px;
  font-size: 12px;
  color: #6E665C;
  font-weight: 600;
}

.os-hcfg-dim-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 99, 50, 0.12);
  color: #A64D22;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.os-hcfg-num-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
  margin-block-end: 8px;
}

.os-hcfg-num-input {
  inline-size: 100%;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid rgba(42, 36, 31, 0.16);
  background: #FFFFFF;
  color: #1F1D1A;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.os-hcfg-step-btn {
  padding: 6px 0;
  border-radius: 9px;
  border: 1px solid rgba(42, 36, 31, 0.12);
  background: #F2EFE9;
  color: #2A241F;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.os-hcfg-step-btn:hover {
  background: #E5DFD3;
}

/* 5. BRAND-CONSISTENT RANGE SLIDER (Theo chuẩn modern-web-guidance `slider`) */
input[type="range"].os-hcfg-range {
  --slider-track-size: 0.42rem;
  --slider-thumb-size: 1.15rem;
  --slider-track-radius: 999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: #DFD9CE;
  --slider-fill-color: #C96332;
  --slider-thumb-color: #C96332;
  --slider-direction: to right;
  --attr-min: attr(min type(<number>), 0);
  --attr-max: attr(max type(<number>), 100);
  --control-value: attr(value type(<number>), 50);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  block-size: 2rem;
  margin: 0 0 8px 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@supports not (opacity: progress(1, 0, 100)) {
  input[type="range"].os-hcfg-range {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

input[type="range"].os-hcfg-range::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

input[type="range"].os-hcfg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc(
    (var(--slider-track-size) - var(--slider-thumb-size)) / 2
  );
  border: 2px solid #FAF7F0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  box-shadow: 0 2px 6px rgba(42, 36, 31, 0.25);
}

input[type="range"].os-hcfg-range::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

input[type="range"].os-hcfg-range::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

input[type="range"].os-hcfg-range::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 2px solid #FAF7F0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

input[type="range"].os-hcfg-range:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 4px;
}

.os-hcfg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-block-end: 8px;
}

.os-hcfg-chip {
  flex: 1 1 auto;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(42, 36, 31, 0.09);
  background: #F2EFE9;
  color: #4A443D;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.os-hcfg-chip:hover,
.os-hcfg-chip.is-active {
  background: #C96332;
  color: #FFFFFF;
  border-color: #C96332;
}

.os-hcfg-hint {
  margin: 0;
  font-size: 11.5px;
  color: #7D756B;
  line-height: 1.35;
}

.os-hcfg-recommend-btn {
  margin-block-start: 8px;
  inline-size: 100%;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid #C96332;
  background: rgba(201, 99, 50, 0.1);
  color: #A64D22;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.os-hcfg-recommend-btn:hover {
  background: #C96332;
  color: #FFFFFF;
}

/* Multi-checkbox Phân khu */
.os-hcfg-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.os-hcfg-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 9px;
  background: #F4F1EA;
  font-size: 12.5px;
  font-weight: 500;
  color: #1F1D1A;
  cursor: pointer;
}

.os-hcfg-check:hover {
  background: #EAE5DA;
}

.os-hcfg-check input[type="checkbox"] {
  accent-color: #C96332;
  inline-size: 15px;
  block-size: 15px;
  margin: 0;
  cursor: pointer;
}

/* Bảng Phân tích */
.os-hcfg-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-block-end: 10px;
}

.os-hcfg-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 11px;
  background: #F3F0E8;
  text-align: center;
}

.os-hcfg-metric.is-accent {
  background: rgba(201, 99, 50, 0.12);
}

.os-hcfg-metric span {
  font-size: 11px;
  color: #7D756B;
}

.os-hcfg-metric strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #1F1D1A;
}

.os-hcfg-metric.is-accent strong {
  color: #C96332;
}

.os-hcfg-metric small {
  font-size: 10.5px;
  color: #6E665C;
}

.os-hcfg-boq-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #F7F4ED;
  font-size: 11.5px;
  color: #5C554C;
}

/* 6. ENGINE HUD & BOTTOM STAGE PILLS */
.os-stage-bottom-bar {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-block-start: 6px;
}

.os-engine-hud {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(31, 29, 26, 0.88);
  color: #F4F1EA;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  box-shadow: 0 6px 18px rgba(28, 25, 22, 0.12);
}

.os-hud-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: #DF7845;
  box-shadow: 0 0 8px #DF7845;
}

.os-hud-sep {
  opacity: 0.45;
}

.os-stage-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.os-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 99, 50, 0.28);
  background: rgba(250, 247, 240, 0.92);
  color: #2A241F;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.os-stage-pill .os-pill-num {
  color: #C96332;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 11.5px;
}

.os-stage-pill:hover,
.os-stage-pill.is-active {
  background: #C96332;
  color: #FFFFFF;
  border-color: #C96332;
  box-shadow: 0 6px 16px rgba(201, 99, 50, 0.24);
  transform: translateY(-1px);
}

.os-stage-pill:hover .os-pill-num,
.os-stage-pill.is-active .os-pill-num {
  color: #FFF5EB;
}

/* 7. SVG STAGE ANIMATION & TAXONOMY PLINTHS */
#bpx-office-anatomy-svg .anatomy-stage {
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

#bpx-office-anatomy-svg .anatomy-stage.is-hidden-stage {
  opacity: 0 !important;
  transform: translateY(-20px) scale(0.97) !important;
  pointer-events: none !important;
}

#bpx-office-anatomy-svg .anatomy-stage.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

#bpx-taxonomy-svg .tax-cat-node {
  cursor: pointer;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}

#bpx-taxonomy-svg .tax-cat-node:hover {
  transform: translateY(-8px);
}

#bpx-taxonomy-svg .tax-cat-node.is-selected {
  transform: translateY(-12px);
  filter: drop-shadow(0 14px 20px rgba(201, 99, 50, 0.26));
}

#bpx-taxonomy-svg .tax-cat-node.is-dimmed {
  opacity: 0.32;
}