/* ==========================================================================
   Zakir OS — Team roster, invitations, permission drawer.
   ========================================================================== */

.member-list{display:flex;flex-direction:column}
.member{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.member:last-child{border-bottom:none}
.member__body{display:flex;flex-direction:column;flex:1;min-width:0}
.member__name{font-size:var(--t-md);font-weight:500;display:flex;align-items:center;gap:var(--s2)}
.member__email{font-size:var(--t-sm);color:var(--text-3)}
.member__you{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);
}
.member__role{width:120px;flex:none;text-transform:capitalize}

.row-menu{
  position:absolute;top:calc(100% - 8px);right:0;z-index:var(--z-drawer);
  min-width:220px;padding:var(--s2);
  background:var(--raised);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--e3);
  animation:rise var(--fast) var(--ease);
}

.invite-form{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.invite-form .auth__field{margin:0}
.invite-form select{width:140px;text-transform:capitalize}

.link-panel{border-color:var(--accent-line);background:
  linear-gradient(var(--accent-soft), transparent 60%), var(--surface)}
.link-panel input{font-size:var(--t-sm)}

/* --- Permission drawer ---------------------------------------------------- */
.drawer-backdrop{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:rgba(0,0,0,.45);
  display:flex;justify-content:flex-end;
  animation:fade var(--fast) var(--ease);
}
.drawer{
  width:min(560px,100vw);
  height:100%;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--line-strong);
  box-shadow:var(--e3);
  animation:slide-in var(--base) var(--ease);
}
.drawer__head{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s5);border-bottom:1px solid var(--line);
}
.drawer__head > div{flex:1;min-width:0}
.drawer__title{font-size:var(--t-xl);margin-top:var(--s1)}
.drawer__sub{color:var(--text-3);font-size:var(--t-sm)}
.drawer__search{padding:var(--s3) var(--s5);border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow-y:auto;padding:var(--s3) var(--s5) var(--s5)}
.drawer__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-top:1px solid var(--line);
  background:var(--raised);
}

.perm-group{margin-top:var(--s4)}
.perm-group__title{margin-bottom:var(--s2)}
.perm{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);
}
.perm:last-child{border-bottom:none}
.perm__body{display:flex;flex-direction:column;flex:1;min-width:0}
.perm__label{font-size:var(--t-md)}
.perm__key{font-size:var(--t-2xs);color:var(--text-3)}
.perm__default{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  color:var(--text-3);white-space:nowrap;
}
.perm[data-state="granted"] .perm__label{color:var(--up)}
.perm[data-state="revoked"] .perm__label{color:var(--down)}

/* Segmented control: deny / role / allow */
.seg{
  display:inline-flex;flex:none;
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--raised);
}
.seg__btn{
  padding:0 var(--s2);height:26px;
  font-size:var(--t-2xs);font-family:var(--font-mono);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-3);
  border-right:1px solid var(--line);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.seg__btn:last-child{border-right:none}
.seg__btn:hover{background:var(--hover);color:var(--text-2)}
.seg__btn[data-on="true"]{background:var(--active);color:var(--text)}
.seg__btn[data-value="revoked"][data-on="true"]{background:rgba(240,68,56,.16);color:var(--down)}
.seg__btn[data-value="granted"][data-on="true"]{background:rgba(18,183,106,.16);color:var(--up)}

@media (max-width:720px){
  .member__role{width:100px}
  .perm__default{display:none}
  .invite-form{flex-direction:column;align-items:stretch}
  .invite-form select{width:100%}
  .drawer{width:100vw}
}

/* --- Role editor ---------------------------------------------------------- */
.roles{display:flex;flex-direction:column}
.role-row{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.role-row:last-child{border-bottom:none}
.role-row__rank{width:28px;color:var(--text-3);font-size:var(--t-sm)}
.role-row__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:140px}
.role-row__name{display:flex;align-items:center;gap:var(--s2);font-weight:500}
.role-row__meta{font-size:var(--t-sm)}
.role-row__delete{
  flex-basis:100%;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s2);padding:var(--s3);
  background:var(--overlay);border-radius:var(--r-md);font-size:var(--t-sm);
}

.perm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.perm-group h4{margin:0 0 var(--s2)}
.perm{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);cursor:pointer;
}
.perm:last-child{border-bottom:none}
.perm[data-held="no"]{opacity:.42;cursor:not-allowed}
.perm__body{display:flex;flex-direction:column;gap:1px;min-width:0}
.perm__label{font-size:var(--t-md)}
.perm__key{font-size:var(--t-2xs);color:var(--text-3)}

@media (max-width:720px){
  .perm-groups{grid-template-columns:1fr}
  .role-row{gap:var(--s2)}
}