/* Vchat 0.36.68 — Team & permissions responsive production UI */

/* TEAM PAGE LAYOUT */
.vchat-frontend-app [data-vchat-panel="team"]{
  padding-bottom:56px!important;
}
.vchat-frontend-app [data-vchat-panel="team"]>.vchat-heading-row{
  align-items:flex-end!important;
  gap:24px!important;
  margin-bottom:24px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-page-heading{
  min-width:0!important;
  flex:1 1 auto!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-page-heading h1{
  margin-bottom:8px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-page-heading p{
  max-width:860px!important;
  font-size:13px!important;
  line-height:1.55!important;
}

/* KPI CARDS — fix clipping from screenshot */
.vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0 0 20px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview>article{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-width:0!important;
  min-height:128px!important;
  padding:20px!important;
  border:1px solid #dfd9e9!important;
  border-radius:18px!important;
  background:#fff!important;
  overflow:visible!important;
  box-shadow:0 10px 28px rgba(40,31,72,.04)!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview small{
  display:block!important;
  margin:0!important;
  color:#7c7589!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:800!important;
  text-transform:none!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview strong{
  display:block!important;
  margin:3px 0 0!important;
  max-width:100%!important;
  color:#29243f!important;
  font-size:clamp(23px,2vw,31px)!important;
  line-height:1.08!important;
  letter-spacing:-.5px!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview span{
  display:block!important;
  margin-top:auto!important;
  color:#96909f!important;
  font-size:9.5px!important;
  line-height:1.35!important;
  text-transform:none!important;
  overflow:visible!important;
  white-space:normal!important;
}

/* TABS */
.vchat-frontend-app [data-vchat-panel="team"] .vchat-access-tabs{
  display:inline-flex!important;
  gap:4px!important;
  max-width:100%!important;
  margin:0 0 16px!important;
  padding:5px!important;
  border-radius:14px!important;
  background:#eceaf5!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-access-tabs button{
  min-height:40px!important;
  padding:0 16px!important;
  border-radius:10px!important;
  font-size:11px!important;
  font-weight:850!important;
}

/* SEARCH TOOLBAR */
.vchat-frontend-app .vchat-team-toolbar{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 14px!important;
  padding:14px!important;
  border:1px solid #e0dbea!important;
  border-radius:17px!important;
  background:#fff!important;
}
.vchat-frontend-app .vchat-team-search{
  display:grid!important;
  gap:6px!important;
  width:min(520px,55%)!important;
  min-width:0!important;
  color:#70697e!important;
  font-size:9px!important;
  font-weight:850!important;
}
.vchat-frontend-app .vchat-team-search input{
  width:100%!important;
  height:42px!important;
  padding:0 13px!important;
  border:1px solid #ddd8e9!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#2e2942!important;
  font-size:12px!important;
  outline:none!important;
  box-sizing:border-box!important;
}
.vchat-frontend-app .vchat-team-search input:focus{
  border-color:#6a56b9!important;
  box-shadow:0 0 0 3px rgba(106,86,185,.12)!important;
}
.vchat-frontend-app .vchat-team-result-copy{
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  padding:0 4px 8px!important;
  color:#847d91!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-team-result-copy strong{
  color:#332d49!important;
  font-size:17px!important;
}
.vchat-frontend-app .vchat-team-result-copy span{
  font-size:10px!important;
}

/* TABLE */
.vchat-frontend-app .vchat-team-table-shell{
  width:100%!important;
  overflow:auto!important;
  border:1px solid #dfd9e9!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(40,31,72,.04)!important;
}
.vchat-frontend-app .vchat-team-table{
  width:100%!important;
  min-width:980px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:auto!important;
}
.vchat-frontend-app .vchat-team-table th{
  padding:13px 16px!important;
  border-bottom:1px solid #e9e5ef!important;
  background:#faf9fd!important;
  color:#7c7589!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  text-align:left!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-team-table td{
  padding:16px!important;
  border-bottom:1px solid #efecf4!important;
  color:#352f48!important;
  font-size:11px!important;
  line-height:1.4!important;
  vertical-align:middle!important;
}
.vchat-frontend-app .vchat-team-table tbody tr:last-child td{
  border-bottom:0!important;
}
.vchat-frontend-app .vchat-team-table tbody tr:hover{
  background:#fcfbfe!important;
}

/* PERSON CELL */
.vchat-frontend-app .vchat-team-person-cell{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-width:210px!important;
}
.vchat-frontend-app .vchat-team-person-cell>.vchat-team-avatar{
  display:grid!important;
  place-items:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:#eeeafb!important;
  color:#5d4ea8!important;
  font-size:12px!important;
  font-weight:900!important;
}
.vchat-frontend-app .vchat-team-person-cell>span:last-child{
  min-width:0!important;
}
.vchat-frontend-app .vchat-team-person-cell strong,
.vchat-frontend-app .vchat-team-person-cell small,
.vchat-frontend-app .vchat-team-person-cell em{
  display:block!important;
  max-width:260px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-team-person-cell strong{
  color:#29243e!important;
  font-size:12.5px!important;
  line-height:1.3!important;
}
.vchat-frontend-app .vchat-team-person-cell small{
  margin-top:3px!important;
  color:#777082!important;
  font-size:9.5px!important;
}
.vchat-frontend-app .vchat-team-person-cell em{
  margin-top:3px!important;
  color:#9a94a3!important;
  font-size:8.5px!important;
  font-style:normal!important;
}

/* DEPARTMENT CHIPS */
.vchat-frontend-app .vchat-team-table .vchat-member-departments{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  min-width:150px!important;
  margin:0!important;
}
.vchat-frontend-app .vchat-team-table .vchat-member-departments em{
  display:inline-flex!important;
  align-items:center!important;
  max-width:145px!important;
  min-height:26px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:#f0eefb!important;
  color:#5e50a6!important;
  font-size:8.5px!important;
  font-weight:850!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-no-department{
  color:#9993a2!important;
  font-size:9px!important;
}

/* ROLE / SCOPE */
.vchat-frontend-app .vchat-team-table .vchat-team-role{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#eeeafb!important;
  color:#5949a0!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-team-table .vchat-member-access{
  display:block!important;
  min-width:180px!important;
}
.vchat-frontend-app .vchat-team-table .vchat-member-access strong{
  display:block!important;
  color:#38324c!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.vchat-frontend-app .vchat-team-table .vchat-member-access small{
  display:block!important;
  margin-top:4px!important;
  max-width:220px!important;
  color:#938d9d!important;
  font-size:8.5px!important;
  line-height:1.4!important;
  white-space:normal!important;
}

/* STATUS */
.vchat-frontend-app .vchat-team-table .vchat-team-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#f2f0f4!important;
  color:#77717d!important;
  font-size:9px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.vchat-frontend-app .vchat-team-table .vchat-team-status i{
  display:block!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  background:#aaa3af!important;
}
.vchat-frontend-app .vchat-team-table .vchat-team-status.is-active{
  background:#eaf8ef!important;
  color:#2d8056!important;
}
.vchat-frontend-app .vchat-team-table .vchat-team-status.is-active i{
  background:#35a76c!important;
}
.vchat-frontend-app .vchat-owner-lock{
  display:inline-block!important;
  color:#8f8999!important;
  font-size:9px!important;
  font-weight:750!important;
}

/* ACTION */
.vchat-frontend-app .vchat-team-table .vchat-row-actions{
  display:flex!important;
  justify-content:flex-end!important;
}
.vchat-frontend-app .vchat-team-table .vchat-row-actions button{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid #ddd8e9!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#58499d!important;
  font-size:8.5px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}

/* PAGINATION 10 BY 10 */
.vchat-frontend-app .vchat-team-pagination{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin-top:12px!important;
  padding:12px 14px!important;
  border:1px solid #e0dbea!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#817a8d!important;
  font-size:9.5px!important;
}
.vchat-frontend-app .vchat-team-pagination>div{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
.vchat-frontend-app .vchat-team-pagination button{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid #ddd8e9!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#594a9f!important;
  font-size:9px!important;
  font-weight:850!important;
}
.vchat-frontend-app .vchat-team-pagination button:disabled{
  opacity:.4!important;
  cursor:not-allowed!important;
}
.vchat-frontend-app #vchat-team-page-label{
  min-width:92px!important;
  text-align:center!important;
  color:#4e475e!important;
  font-weight:750!important;
}

/* ROLES TAB */
.vchat-frontend-app [data-vchat-panel="team"] .vchat-role-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:18px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-role-card{
  padding:18px!important;
  border-radius:18px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-role-card p{
  min-height:58px!important;
  margin:14px 0!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-permission-matrix{
  border-radius:18px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-head{
  padding:19px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-head h2{
  font-size:19px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-head>span{
  font-size:10px!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-scroll{
  max-width:100%!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
.vchat-frontend-app [data-vchat-panel="team"] .vchat-permission-matrix table{
  min-width:820px!important;
}

/* RESPONSIVE */
@media(max-width:1180px){
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-role-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .vchat-frontend-app [data-vchat-panel="team"]>.vchat-heading-row{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"]>.vchat-heading-row>button{
    align-self:flex-start!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview>article{
    min-height:112px!important;
    padding:15px!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview strong{
    font-size:21px!important;
  }
  .vchat-frontend-app .vchat-team-toolbar{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .vchat-frontend-app .vchat-team-search{
    width:100%!important;
  }
  .vchat-frontend-app .vchat-team-result-copy{
    padding:0!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-role-grid{
    grid-template-columns:1fr!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-matrix-head>span{
    max-width:none!important;
    text-align:left!important;
  }
  .vchat-frontend-app .vchat-team-pagination{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .vchat-frontend-app .vchat-team-pagination>div{
    width:100%!important;
    justify-content:space-between!important;
  }
}
@media(max-width:480px){
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-seat-overview{
    grid-template-columns:1fr!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-access-tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  .vchat-frontend-app [data-vchat-panel="team"] .vchat-access-tabs button{
    width:100%!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
}