/* Shared three-column panel layout (extracted from door page for uniformity) */
.main-3col-layout {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px;
  gap: 20px;
  /* Added ~3 lines of extra vertical space (≈50-60px) */
  height: calc(100vh - 170px); /* Was 200px */
  min-height: 670px; /* Was 660px (added +10px) */
  box-sizing: border-box;
  max-width: 1700px; /* prevent extreme stretch on ultra-wide */
  margin: 0 auto; /* center horizontally */
}

.panel-left,
.panel-middle,
.panel-right {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
}

/* Specific width constraints to mirror door page */
/* Adjusted widths for better proportion consistency with original index view */
.panel-left { width: 300px; flex: 0 0 300px; }
.panel-right { width: 280px; flex: 0 0 280px; }
.panel-middle { flex: 1 1 auto; gap: 18px; min-width: 0; }

/* Ensure viewer container stretches */
#viewerContainer, #doorViewerContainer, .viewer-wrapper {
  flex: 1 1 auto;
  min-height: 550px;
  position: relative;
  background: #fff;
  border-radius: 6px;
  overflow-x: hidden;
}

/* CRITICAL FIX: Smooth transition for 921-1000px viewport range to prevent double scrolling */
@media (min-width: 921px) and (max-width: 1000px) {
  .main-3col-layout {
    display: block !important; /* Force single column early to prevent scroll conflicts */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .panel-left, .panel-middle, .panel-right {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #viewerContainer, #doorViewerContainer, .viewer-wrapper {
    height: auto !important;
    min-height: 400px !important;
    max-height: none !important;
  }
}

/* Responsive collapse */
@media (max-width: 900px) {
  .main-3col-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 10px;
    gap: 15px;
  }
  .panel-left, .panel-middle, .panel-right {
    width: 100% !important;
    flex: 1 1 auto !important;
    border: none;
    border-radius: 8px;
    padding: 10px 4vw;
    height: auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  #viewerContainer, #doorViewerContainer, .viewer-wrapper {
    min-height: 320px;
  }
}

/* Ultra-compact small screens */
@media (max-width: 600px) {
  .panel-left, .panel-middle, .panel-right { padding: 12px 5vw; }
  .main-3col-layout { padding: 8px; }
}

/* Light accent separators inside panels (optional) */
.panel-left h3, .panel-right h5, .panel-left h4 { margin-top: 0; }
.panel-left h3, .panel-right h5 {
  border-bottom: 3px solid #007bff10;
  padding-bottom: 8px;
}

/* Utility class to allow scrolling content inside fixed-height panels */
.panel-scroll { overflow-y: auto; min-height: 0; }

/* Avoid double borders if nested white boxes present */
.panel-left > .box, .panel-middle > .box, .panel-right > .box { border: none; box-shadow: none; }