/* ============================================================
   BOTVIET SMART SYNC BOARD REPAIR R51
   Scope: ONLY .r47-sync-board inside /app/connections.
   R51 DOES NOT create/fake data. It stabilizes the real R47 renderer.
   ============================================================ */

.connections-r42 .r47-sync-board{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(500px,1fr)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:18px auto 0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(43,151,255,.82)!important;
  background:
    radial-gradient(circle at 78% 16%,rgba(33,110,255,.15),transparent 30%),
    linear-gradient(150deg,#061c40 0%,#04152f 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(100,200,255,.035),
    inset 0 0 30px rgba(44,131,255,.035),
    0 15px 38px rgba(0,0,0,.22),
    0 0 22px rgba(26,117,255,.08)!important;
  box-sizing:border-box!important;
}

/* Never let a stale R49 mount take space after repair. */
.r49-sync-board-mount{
  display:none!important;
}
.r49-hidden-original{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* LEFT REAL DATA PANEL */
.connections-r42 .r47-sync-main{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  min-height:245px!important;
  padding:20px 24px 15px!important;
  overflow:hidden!important;
  border-right:1px solid rgba(54,133,220,.34)!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-sync-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-width:0!important;
}

.connections-r42 .r47-sync-head>div{
  min-width:0!important;
  flex:1 1 auto!important;
}

.connections-r42 .r47-sync-head h2{
  margin:0 0 6px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#fff!important;
  font-size:21px!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
}

.connections-r42 .r47-sync-head p{
  margin:0!important;
  color:#a8bad3!important;
  font-size:12px!important;
  line-height:1.45!important;
}

.connections-r42 .r47-sync-all{
  flex:0 0 auto!important;
  position:relative!important;
  inset:auto!important;
  min-width:150px!important;
  width:auto!important;
  height:42px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  white-space:nowrap!important;
}

.connections-r42 .r47-metric-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
  width:100%!important;
  min-width:0!important;
  margin-top:16px!important;
}

.connections-r42 .r47-metric-card{
  position:relative!important;
  min-width:0!important;
  width:auto!important;
  height:112px!important;
  min-height:112px!important;
  max-height:112px!important;
  padding:12px 10px 34px!important;
  overflow:hidden!important;
  border-radius:15px!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-metric-copy{
  min-width:0!important;
  margin-left:46px!important;
}

.connections-r42 .r47-metric-copy small{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.connections-r42 .r47-metric-copy strong{
  font-size:21px!important;
}

.connections-r42 .r47-metric-spark{
  left:9px!important;
  right:9px!important;
  bottom:5px!important;
  height:29px!important;
}

.connections-r42 .r47-live-foot{
  width:100%!important;
  min-width:0!important;
  margin-top:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

.connections-r42 .r47-live-foot span{
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* RIGHT PREVIEW */
.connections-r42 .r47-live-preview{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:112px minmax(155px,.83fr) minmax(205px,1.17fr)!important;
  align-items:center!important;
  gap:11px!important;
  width:auto!important;
  min-width:0!important;
  min-height:245px!important;
  height:auto!important;
  padding:14px 14px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-channel-stack{
  min-width:0!important;
  width:100%!important;
  gap:8px!important;
}

.connections-r42 .r47-channel-stack>span{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  grid-template-columns:24px minmax(0,1fr) 6px!important;
  gap:6px!important;
  padding:5px 7px!important;
  overflow:hidden!important;
}

.connections-r42 .r47-channel-stack b{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:8px!important;
  line-height:1.15!important;
}

/* Device never pushes the list out of its grid column. */
.connections-r42 .r47-device-zone{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:190px!important;
  height:205px!important;
  margin:0 auto!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-device-card{
  width:118px!important;
  height:184px!important;
}

.connections-r42 .r47-device-back{
  width:112px!important;
  height:174px!important;
}

.connections-r42 .r47-secondary-device{
  width:65px!important;
  height:132px!important;
  right:0!important;
}

/* Product list: stop vertical letter wrapping / column collapse. */
.connections-r42 .r47-content-live{
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:200px!important;
  height:auto!important;
  padding:9px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-content-live>header{
  min-width:0!important;
  gap:6px!important;
}

.connections-r42 .r47-content-live>header>b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.connections-r42 .r47-content-live-list{
  width:100%!important;
  min-width:0!important;
}

.connections-r42 .r47-content-row{
  width:100%!important;
  min-width:0!important;
  min-height:45px!important;
  grid-template-columns:42px minmax(0,1fr) 22px!important;
  gap:7px!important;
  padding:5px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.connections-r42 .r47-content-thumb{
  width:42px!important;
  height:35px!important;
  min-width:42px!important;
}

.connections-r42 .r47-content-copy{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}

.connections-r42 .r47-content-copy b,
.connections-r42 .r47-content-copy small{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
}

.connections-r42 .r47-content-copy b{
  font-size:8.5px!important;
}

.connections-r42 .r47-content-copy small{
  font-size:6.5px!important;
}

.connections-r42 .r47-mini-provider{
  width:22px!important;
  min-width:22px!important;
}

/* Wide desktop */
@media(min-width:1450px){
  .connections-r42 .r47-sync-board{
    grid-template-columns:minmax(0,1.52fr) minmax(520px,.98fr)!important;
  }

  .connections-r42 .r47-sync-main{
    min-height:250px!important;
  }

  .connections-r42 .r47-live-preview{
    min-height:250px!important;
    grid-template-columns:118px minmax(170px,.84fr) minmax(220px,1.16fr)!important;
  }
}

/* Laptop/tablet: stack the preview under metrics before columns become cramped. */
@media(max-width:1180px){
  .connections-r42 .r47-sync-board{
    grid-template-columns:1fr!important;
  }

  .connections-r42 .r47-sync-main{
    border-right:0!important;
    border-bottom:1px solid rgba(54,133,220,.34)!important;
  }

  .connections-r42 .r47-live-preview{
    grid-template-columns:120px minmax(180px,.8fr) minmax(260px,1.2fr)!important;
  }
}

/* Mobile */
@media(max-width:720px){
  .connections-r42 .r47-sync-board{
    border-radius:20px!important;
  }

  .connections-r42 .r47-sync-main{
    min-height:0!important;
    padding:16px 13px 13px!important;
  }

  .connections-r42 .r47-sync-head{
    flex-direction:column!important;
    gap:11px!important;
  }

  .connections-r42 .r47-sync-head h2{
    font-size:18px!important;
  }

  .connections-r42 .r47-sync-all{
    width:100%!important;
    min-width:0!important;
  }

  .connections-r42 .r47-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .connections-r42 .r47-metric-card{
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
  }

  .connections-r42 .r47-live-foot{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .connections-r42 .r47-live-foot span{
    white-space:normal!important;
  }

  .connections-r42 .r47-live-preview{
    grid-template-columns:86px minmax(0,1fr)!important;
    min-height:0!important;
    padding:13px!important;
    gap:9px!important;
  }

  .connections-r42 .r47-channel-stack>span{
    grid-template-columns:22px minmax(0,1fr)!important;
  }

  .connections-r42 .r47-channel-stack>span>i{
    display:none!important;
  }

  .connections-r42 .r47-device-zone{
    max-width:180px!important;
    height:195px!important;
  }

  .connections-r42 .r47-content-live{
    grid-column:1/-1!important;
    min-height:0!important;
  }

  .connections-r42 .r47-energy-line{
    display:none!important;
  }
}

@media(max-width:430px){
  .connections-r42 .r47-metric-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .connections-r42 .r47-metric-copy{
    margin-left:41px!important;
  }

  .connections-r42 .r47-live-preview{
    grid-template-columns:1fr!important;
  }

  .connections-r42 .r47-channel-stack{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }

  .connections-r42 .r47-device-zone{
    width:180px!important;
    margin:0 auto!important;
  }

  .connections-r42 .r47-content-live{
    grid-column:auto!important;
  }
}