/* โครง shell: sidebar คงที่ + เปลี่ยนเฉพาะ iframe เนื้อหา */
body[data-dash-shell].dash-with-sidebar {
  display: flex;
  min-height: 100vh;
}

body[data-dash-shell] {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  /* สีเดียวกับ --canvas ของหน้า — ตอน iframe ซ่อนระหว่างโหลดจะไม่กระพริบขาว */
  background: #f2f4f7;
}

body[data-dash-shell] .dash-content-frame {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: none;
  display: block;
  background: #f2f4f7;
  opacity: 1;
  transition: opacity 0.22s ease;
}

@media (max-width: 900px) {
  body[data-dash-shell].dash-with-sidebar {
    overflow-x: hidden;
  }

  body[data-dash-shell] .dash-content-frame {
    min-height: 0;
  }
}

/* ระยะเวลาต้องตรงกับ EXIT_MS ใน dash-sidebar.js */
body[data-dash-shell] .dash-content-frame.dash-frame-loading {
  opacity: 0;
  transition-duration: 0.12s;
}

body[data-dash-shell].dash-sidebar-collapsed .dash-content-frame {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  body[data-dash-shell] .dash-content-frame {
    transition: none;
  }
}