/* CannaGrow 0.14.33 – Mobile Detail-Schließen + pixelgenaue Growroom-Hotspots */

/* 0.14.31 legte die Klickzonen noch in ein CSS-Grid. Die Pixi-Szene berechnet
   ihre Lampen/Ventilatoren aber pixelgenau. 0.14.33 setzt deshalb die vom JS
   berechneten Koordinaten direkt auf dieselbe Rack-Ebene. */
.room-tech-hotspots{
  position:absolute;
  inset:0;
  z-index:20;
  display:block!important;
  padding:0!important;
  gap:0!important;
  pointer-events:none;
}
.room-tech-hotspot-cell{display:contents}
.room-tech-hotspot{
  position:absolute;
  margin:0;
  transform:none!important;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.room-tech-hotspot-light,
.room-tech-hotspot-fan{
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
}

/* Die Pflanzenfläche darf auf Mobile nicht den oberen Technik-/Raumbereich
   optisch "verschlucken". Der JS-Hit-Test begrenzt die eigentliche Aktion;
   hier bleibt die freie obere Zone zusätzlich ohne Hover-/Tap-Effekt. */
@media(max-width:760px){
  #roomScene .plant-grid.pixi-overlay{
    pointer-events:none;
  }
  #roomScene .plant-grid.pixi-overlay .plant-slot{
    pointer-events:auto;
  }

  /* Nicht mehr fixed: mobile Browser behandeln fixed-Elemente innerhalb von
     Backdrop-Filter-Containern unterschiedlich. Stattdessen bekommt das Modal
     echten Safe-Area-Abstand und das X sitzt sicher innerhalb des Fensters. */
  #detailModal{
    align-items:start!important;
    place-items:start center!important;
    overflow-y:auto;
    padding-top:max(30px,calc(env(safe-area-inset-top,0px) + 20px))!important;
    padding-right:max(12px,calc(env(safe-area-inset-right,0px) + 10px))!important;
    padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))!important;
    padding-left:max(12px,calc(env(safe-area-inset-left,0px) + 10px))!important;
  }
  #detailModal > .detail-modal{
    position:relative!important;
    width:100%!important;
    max-height:calc(100dvh - max(70px,calc(env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px) + 48px)))!important;
    margin:0 auto!important;
    overflow:auto!important;
  }
  #detailModal > .detail-modal > #closeDetailBtn{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    z-index:200!important;
    border-radius:15px!important;
    background:rgba(18,34,24,.98)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.34)!important;
    color:#e4f1e8!important;
    font-size:25px!important;
    line-height:1!important;
    touch-action:manipulation;
  }
  #detailModal .detail-head{
    padding-right:62px!important;
  }
}

@media(max-width:430px){
  #detailModal{
    padding-top:max(34px,calc(env(safe-area-inset-top,0px) + 22px))!important;
  }
}