html {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

div {
  margin: 0;
  padding: 0;
}

.ui-toolip
{
	width: auto;
	height: auto;
}

#interfaces, #interface-controls
{
	position: absolute; 
/* 	width: 100%; */
/* 	height: 100%; */
}

#interfaces
{
	z-index: 0;
}

#interface-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;          /* ✅ Move to left */

    width: auto;         /* ✅ Do not occupy full width */
    margin: 0;           /* ✅ Remove auto centering */
    text-align: left;    /* ✅ Align buttons left */

    z-index: 100;
}

#camera-controls
{
	float: left;
/* 	right: 50%; */
/* 	bottom: 50px; */
}

#floorplanner, #viewer
{  
  position: absolute;
  width: 100vw;
  height:100vh;
}

#floorplanner-controls 
{
  position: absolute;
  left: 0;
  top: 0;
  margin: 20px 0;
  padding: 0 20px; 
  width: 100%;
}

#main-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 0;  
}

#walltextures
{
	position: absolute;
	right: 100px;
	top: 100px;
}

.btn-file {
  display: inline-block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

.btn-hint 
{
  position: absolute;
  left: 20px;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.50);
  color: #ffffff;
  padding: 5px 10px;
  z-index: 10;
  display: none;
}


.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.inventory-content
{
	max-height: 500px;
	overflow-y: scroll;
}

/* .ui-dialog, .ui-dialog-content, .ui-widget-content */
/* { */
/* 	min-width: 50%; */
/* 	max-height: 500px; */
/* 	height: 500px; */
/*     overflow: auto; */
/*     position: relative; */
/*     padding: 0 !important; */
/* } */

/* Enable multiple lines in bootstrap tooltips */
.tooltip-inner {
    white-space:pre-wrap;
}

.dg select
{
	color: #000000;
}


/**/
.plx-panel{
  position:fixed;
  left:0;
  top:80px;                          /* moved down */
  width:240px;                      /* ⬅ 280 → 240 (≈15–20%) */
  max-height:calc(100vh - 150px);   /* ⬅ height reduced ~20% */
  background:#141414;
  border-right:1px solid #333;
  border-radius:12px;
  z-index:100;
  display:flex;
  flex-direction:column;
}


@media(max-width:768px){
  .plx-panel{ width:85%; }
}

.plx-scroll{
  height:100%;
  overflow-y:auto;
  padding:10px;
}

.plx-section{
  background:#1e1e1e;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
}

.plx-title{
  color:#00d0ff;
  font-size:13px;
  margin-bottom:8px;
}

.plx-section input,
.plx-section select,
.plx-section button{
  width:100%;
  min-height:44px;
  margin-bottom:6px;
  background:#0f0f0f;
  color:#fff;
  border:1px solid #333;
  border-radius:8px;
  padding:8px;
}

.plx-section button{
  background:#00d0ff;
  color:#000;
  font-weight:600;
}

.plx-info{
  font-size:13px;
  color:#bbb;
}

.plx-total{
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#00ff9c;
}

.plx-room{
  background:#181818;
  border-radius:8px;
  padding:8px;
  margin-bottom:8px;
}

.plx-room-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.plx-remove{
  background:#ff4444;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:4px 8px;
}
/* =========================
   TOP CENTER CONTROLS
========================= */
#button-group-vertical {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 1200;

  /* prevents blocking other top UI */
  pointer-events: none;
}

#interface-controls {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(255, 255, 255, 0.95);
  padding: 6px 8px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  pointer-events: auto; /* buttons clickable */
}

/* Buttons uniform size */
#interface-controls .btn {
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
/* =========================
   TOP CENTER CONTROLS
========================= */
#top-center-controls {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 1200;

  /* allow clicks only on buttons */
  pointer-events: none;
}

#interface-controls {
  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(255, 255, 255, 0.95);
  padding: 6px 8px;
  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  pointer-events: auto;
}

/* uniform button sizing */
#interface-controls .btn {
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* remove old bottom-left positioning */
#interface-controls {
  bottom: auto;
  left: auto;
}
/* =====================================================
   ANDROID PORTRAIT FIX – CENTER EDITOR SAFE MODE
   (Minimal, non-destructive)
===================================================== */
@media screen and (max-width: 480px) and (orientation: portrait) {

  /* ---------- FORCE EDITOR CENTER ---------- */
  #floorplanner,
  #viewer {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  /* ---------- CALCULATOR → BOTTOM SHEET ---------- */
  .plx-panel {
    left: 50% !important;
    transform: translateX(-50%);
    top: auto !important;
    bottom: 8px;

    width: 94vw;                /* 🔑 key fix */
    max-height: 42vh;           /* 🔑 never blocks editor */
    border-radius: 16px;

    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
  }

  /* ---------- SCROLL INSIDE PANEL ONLY ---------- */
  .plx-scroll {
    max-height: 42vh;
    overflow-y: auto;
    padding: 8px;
  }

  /* ---------- COMPACT INPUTS ---------- */
  .plx-section input,
  .plx-section select,
  .plx-section button {
    min-height: 36px;
    font-size: 12px;
    padding: 6px;
  }

  .plx-title {
    font-size: 12px;
  }

  /* ---------- ROOM CARDS ---------- */
  .plx-room {
    padding: 6px;
    margin-bottom: 6px;
  }

  /* ---------- ADD ROOM BUTTON ---------- */
  .plx-section button {
    border-radius: 10px;
  }

  /* ---------- TOP CONTROLS SAFE OFFSET ---------- */
  #top-center-controls {
    top: 40px; /* avoids Android status bar */
  }

  #interface-controls .btn {
    height: 28px;
    font-size: 11px;
    padding: 2px 6px;
  }

  /* ---------- HINT ABOVE PANEL ---------- */
  .btn-hint {
    bottom: 50vh;
    font-size: 11px;
  }
}