/* ============================================================
   BOTVIET CONNECTION LAYOUT FIX R43
   Fix ONLY /app/connections R42 layout.
   Root cause: provider class names on platform cards collided with
   orbit icon positioning classes (.r42-tiktok/.r42-shopee/...).
   ============================================================ */

.connections-r42 .r42-platform-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  width:100%!important;
}

.connections-r42 .r42-platform-grid > .r42-platform-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  box-sizing:border-box!important;
  transform:none!important;
  animation:none!important;
  float:none!important;
  place-self:stretch!important;
}

.connections-r42 .r42-platform-grid > .r42-platform-card.r42-tiktok,
.connections-r42 .r42-platform-grid > .r42-platform-card.r42-tiktok-shop,
.connections-r42 .r42-platform-grid > .r42-platform-card.r42-shopee,
.connections-r42 .r42-platform-grid > .r42-platform-card.r42-facebook{
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  animation:none!important;
}

.connections-r42 .r42-platform-grid > .r42-platform-card:hover{
  transform:translateY(-4px) perspective(700px) rotateX(1deg)!important;
}

.connections-r42 .r42-platform-card header{
  min-width:0!important;
}

.connections-r42 .r42-platform-card h3,
.connections-r42 .r42-platform-card p,
.connections-r42 .r42-platform-card .r42-account-live{
  min-width:0!important;
  max-width:100%!important;
}

.connections-r42 .r42-platform-card p{
  overflow-wrap:anywhere!important;
}

.connections-r42 .r42-status-pill{
  flex:0 0 auto!important;
  max-width:52%!important;
  white-space:nowrap!important;
}

.connections-r42 .r42-platform-cta{
  box-sizing:border-box!important;
  max-width:calc(100% - 40px)!important;
}

/* Keep orbit icon positioning limited to orbit icons only. */
.connections-r42 .r42-orbit-visual .r42-float-platform.r42-fb{
  left:22%!important;
  right:auto!important;
  top:26%!important;
  bottom:auto!important;
  transform:rotate(-8deg)!important;
}
.connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok{
  left:45%!important;
  right:auto!important;
  top:4%!important;
  bottom:auto!important;
}
.connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok-shop{
  left:auto!important;
  right:21%!important;
  top:25%!important;
  bottom:auto!important;
  transform:rotate(7deg)!important;
}
.connections-r42 .r42-orbit-visual .r42-float-platform.r42-shopee{
  left:auto!important;
  right:5%!important;
  top:41%!important;
  bottom:auto!important;
  transform:rotate(6deg)!important;
}

/* Ensure the sync board always starts below the card grid. */
.connections-r42 .r42-sync-board{
  position:relative!important;
  clear:both!important;
  width:100%!important;
  margin-top:18px!important;
  box-sizing:border-box!important;
}

.connections-r42 .r42-sync-main,
.connections-r42 .r42-live-preview{
  min-width:0!important;
  box-sizing:border-box!important;
}

.connections-r42 .r42-metric-grid{
  min-width:0!important;
}

.connections-r42 .r42-metric-card{
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Desktop/tablet */
@media (max-width:1280px){
  .connections-r42 .r42-platform-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media (max-width:640px){
  .connections-r42 .r42-platform-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .connections-r42 .r42-orbit-visual .r42-float-platform.r42-fb{
    left:5%!important;top:29%!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok{
    left:38%!important;top:3%!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform.r42-tiktok-shop{
    right:16%!important;top:22%!important;
  }
  .connections-r42 .r42-orbit-visual .r42-float-platform.r42-shopee{
    right:2%!important;top:48%!important;
  }
}