/* DBX ONE STOCKROOM v0.7.6 — editable room layout.
   Adds a + room tile, room deletion controls, and home-screen-style room ordering.
   Stock Room remains fixed; only room tiles can be rearranged. */

.stock-demo-page .demo-room-tile{cursor:grab;user-select:none;-webkit-user-select:none}
.stock-demo-page .demo-room-tile:active{cursor:grabbing}
.stock-demo-page .demo-add-room-tile{
  display:flex;
  min-height:350px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px dashed rgba(88,187,255,.42)!important;
  background:linear-gradient(145deg,rgba(8,24,39,.72),rgba(8,35,56,.7))!important;
  color:#8ed4ff!important;
  text-align:center!important;
  box-shadow:inset 0 0 0 1px rgba(95,192,255,.035),0 18px 42px rgba(0,0,0,.15)!important;
}
.stock-demo-page .demo-add-room-tile:after{display:none}
.stock-demo-page .demo-add-room-tile:hover{border-color:rgba(109,204,255,.72)!important;background:linear-gradient(145deg,rgba(9,30,48,.86),rgba(9,45,72,.84))!important}
.stock-demo-page .demo-add-room-plus{
  display:grid;
  width:68px;
  height:68px;
  place-items:center;
  border:1px solid rgba(92,190,255,.38);
  border-radius:22px;
  background:rgba(32,145,226,.1);
  color:#64c7ff;
  font-size:46px;
  font-weight:300;
  line-height:1;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.stock-demo-page .demo-add-room-tile>strong{font-size:18px;color:#eaf7ff}
.stock-demo-page .demo-add-room-tile>span:last-child{max-width:220px;color:#7f9bb0;font-size:10px;font-weight:650;line-height:1.45}

.stock-demo-page .demo-room-placeholder{
  min-height:350px;
  border:1px dashed rgba(92,196,255,.46);
  border-radius:24px;
  background:rgba(32,153,232,.075);
  box-shadow:inset 0 0 34px rgba(45,161,237,.06);
  animation:demoRoomPlaceholderPulse 1.1s ease-in-out infinite alternate;
}
@keyframes demoRoomPlaceholderPulse{from{border-color:rgba(92,196,255,.3);background:rgba(32,153,232,.045)}to{border-color:rgba(92,196,255,.62);background:rgba(32,153,232,.1)}}
.stock-demo-page .demo-room-drag-ghost{
  position:fixed!important;
  z-index:12000!important;
  margin:0!important;
  pointer-events:none!important;
  cursor:grabbing!important;
  opacity:.94;
  transform:scale(1.035) rotate(.35deg);
  box-shadow:0 34px 90px rgba(0,0,0,.52)!important;
  filter:brightness(1.07);
}
body.demo-room-reordering{cursor:grabbing!important}
body.demo-room-reordering *{cursor:grabbing!important}

.stock-demo-page .demo-add-room-card{width:min(640px,100%)}
.stock-demo-page .demo-add-room-copy{margin:18px 0 10px}
.stock-demo-page .demo-add-room-copy strong,.stock-demo-page .demo-add-room-copy span{display:block}
.stock-demo-page .demo-add-room-copy strong{color:#eaf5fd;font-size:13px}
.stock-demo-page .demo-add-room-copy span{margin-top:4px;color:#849aad;font-size:10px;line-height:1.5}
.stock-demo-page .demo-add-room-products{display:grid;gap:8px;margin-top:12px}
.stock-demo-page .demo-add-room-product{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:0!important;
  padding:12px 13px;
  border:1px solid #21364a;
  border-radius:14px;
  background:#07111c;
  transition:border-color .16s ease,background .16s ease,opacity .16s ease;
}
.stock-demo-page .demo-add-room-product[data-selected=true]{border-color:rgba(71,178,252,.45);background:#091a29}
.stock-demo-page .demo-add-room-product>input[type=checkbox]{width:19px;height:19px;margin:0;padding:0;accent-color:#229cf2}
.stock-demo-page .demo-add-room-product-copy strong,.stock-demo-page .demo-add-room-product-copy small{display:block}
.stock-demo-page .demo-add-room-product-copy strong{color:#e7f3fc;font-size:12px}
.stock-demo-page .demo-add-room-product-copy small{margin-top:3px;color:#6e8599;font-size:9px}
.stock-demo-page .demo-add-room-target{display:grid;grid-template-columns:auto 68px;align-items:center;gap:8px;color:#7890a5;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.stock-demo-page .demo-add-room-target input{width:68px!important;margin:0!important;padding:9px!important;text-align:center!important}
.stock-demo-page .demo-add-room-target input:disabled{opacity:.28}

.stock-demo-page .demo-room-delete-zone{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,102,119,.16);
}
.stock-demo-page .demo-room-delete-zone[hidden]{display:none!important}
.stock-demo-page .demo-room-delete-zone strong,.stock-demo-page .demo-room-delete-zone span{display:block}
.stock-demo-page .demo-room-delete-zone strong{color:#ffd3d9;font-size:11px}
.stock-demo-page .demo-room-delete-zone span{max-width:360px;margin-top:4px;color:#8d7880;font-size:9px;line-height:1.45}
.stock-demo-page .demo-danger-button{flex:0 0 auto;border:1px solid rgba(255,94,116,.34);border-radius:11px;background:rgba(164,34,54,.12);color:#ff8c9d;padding:10px 13px;font-size:10px;font-weight:850;cursor:pointer}
.stock-demo-page .demo-danger-button:hover{border-color:rgba(255,104,124,.58);background:rgba(186,35,58,.2)}

@media(max-width:620px){
  .stock-demo-page .demo-add-room-tile{min-height:330px;padding:16px!important;border-radius:18px!important}
  .stock-demo-page .demo-add-room-plus{width:58px;height:58px;border-radius:18px;font-size:39px}
  .stock-demo-page .demo-add-room-tile>strong{font-size:16px}
  .stock-demo-page .demo-add-room-tile>span:last-child{max-width:145px;font-size:8.5px}
  .stock-demo-page .demo-room-placeholder{min-height:330px;border-radius:18px}
  .stock-demo-page .demo-room-drag-ghost{transform:scale(1.045) rotate(.55deg)}
  .stock-demo-page .demo-add-room-card{padding:17px 12px!important}
  .stock-demo-page .demo-add-room-product{grid-template-columns:auto minmax(0,1fr);gap:9px 10px;padding:11px}
  .stock-demo-page .demo-add-room-target{grid-column:2;justify-content:start;grid-template-columns:auto 72px}
  .stock-demo-page .demo-room-delete-zone{display:grid;grid-template-columns:1fr;gap:10px}
  .stock-demo-page .demo-danger-button{width:100%}
}

@media(max-width:360px){
  .stock-demo-page .demo-add-room-tile,.stock-demo-page .demo-room-placeholder{min-height:260px}
}

@media(prefers-reduced-motion:reduce){
  .stock-demo-page .demo-room-placeholder{animation:none}
  .stock-demo-page .demo-room-drag-ghost{transform:none}
}
.stock-demo-page .demo-room-tile{-webkit-touch-callout:none}
.stock-demo-page .demo-room-delete-zone.confirming{border-top-color:rgba(255,92,114,.34)}
.stock-demo-page .demo-room-delete-zone.confirming .demo-danger-button{border-color:rgba(255,100,120,.72);background:rgba(194,35,59,.3);color:#ffd8de;box-shadow:0 0 0 3px rgba(255,70,96,.07)}